Question

我想知道如何像componentWillReceiveProps一样使用useEffect。

我在我的React应用中使用Redux。

因此，当状态更新时，我将处于某种状态，我将无法在组件中执行某些功能。当我使用类组件时，我是这样做的：

componentWillReceiveProps(nextProps) {
   if (nextProps.Reducer.complete !== this.props.Reducer.complete) {
     someFunc();
   }
}

现在，我仅使用功能组件和挂钩。

现在我的组件是这样的：我正在尝试以这种方式进行操作，但无法正常工作。你知道我在哪里弄错了吗？

function Component(props) {
  const Reducer = useSelector(state => state.Reducer);

  const someFunc = () => {
     .....
  }

  useEffect(() => {
    someFunc();
  }, [Reducer.complete]);

}

export default Component;

Answer 1

由于someFunc是效果的依赖项，因此您每次渲染someFunc时都会创建Component，由于您正确添加了依赖项，或者每次行为异常，都将调用效果您没有添加它，或者您已经用eslint和详尽的dep设置了开发环境，并且您的开发环境将警告您您的效果缺少依赖项。

要防止在每个渲染器上重新创建someFunc，可以使用useCallback：

function Component(props) {
  const Reducer = useSelector(state => state.Reducer);

  const someFunc = useCallback(() => {
    //  .....
  }, []);

  useEffect(() => {
    someFunc(Reducer.complete); //should use the dep
  }, [Reducer.complete, someFunc]);
}

如果您在someFunc的正文中使用在Component中创建的道具或值，然后将[]作为依赖项传递，则可以使用exhaustive deps来帮助您这个。

以下是效果对改变值的反应的有效示例：

const {
  useCallback,
  useState,
  useEffect,
} = React;

function Component() {
  const [complete, setComplete] = React.useState(false);
  const [message, setMessage] = React.useState(
    `complete is ${complete}`
  );

  const completeChanged = useCallback(complete => {
    console.log(
      'running effect, setting message:',
      complete
    );
    setMessage(`complete is ${complete}`);
  }, []);
  const toggleComplete = useCallback(
    () => setComplete(c => !c),
    []
  );
  useEffect(() => {
    completeChanged(complete); //should use the dep
  }, [complete, completeChanged, setMessage]);
  console.log('rendering:', complete);
  return (
    <div>
      <button onClick={toggleComplete}>
        toggle complete
      </button>
      {message}
    </div>
  );
}


//render app
ReactDOM.render(
  <Component />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

可以使用componentWillReceive钩子来完成相当于旧useEffect道具的react钩子，只需指定我们要侦听依赖项数组中的更改的道具即可。试试这个：

useEffect( () => {
     someFunc()
}, [props.something, someFunc])

Answer 3

好，所以我假设Reducer现在是一个对象，并且有一个complete key。尝试在useEffect内部创建条件。

useEffect(() => {
  if (Reducer.complete) {
    runThisFunction()
  }
}, [Reducer.complete, runThisFuntion])

如何用钩子替换componentWillReceiveProps

3 个答案: