Question

问题是我只想在安装时运行一些逻辑，而且我想在每次渲染/更新时运行一些其他逻辑。我们如何在功能组件中使用钩子来实现这一点。如果它是一个类组件，我可以使用 componentDidMount 进行一次执行，并在每次渲染时使用 componentDidUpdate。

Answer 1

这里有一个完整的解释：

相当于 componentDidMount

useEffect(() => {
  // same as componentDidMount
}, []);

相当于componentDidMount、componentDidUpdate

useEffect(() => {
  // same as componentDidMount and componentDidUpdate
});

这将在状态变量改变时调用

const [message, setMessage] = useState('');
useEffect(() => {    
  // Called when value of message changes
}, [message]);

Answer 2

我看到了您对 @Surjeet Bhadauriya 的评论，没有处理这种情况的特定钩子，但您可以轻松解决此问题。

这是一个例子

const [didMount, setDidMount] = useState(false);

useEffect(() => {
  // your code on didMount;
  setDidMount(true);

}, []);


useEffect(() => {
  if (!didMount)
    return;
  // your code on didUpdate;
});

componentDidMount 和 componentDidUpdate 一起使用 useEffect 钩子

2 个答案:

这里有一个完整的解释：