componentDidMount 和 componentDidUpdate 一起使用 useEffect 钩子答案

【问题标题】：componentDidMount and componentDidUpdate together using useEffect hookcomponentDidMount 和 componentDidUpdate 一起使用 useEffect 钩子
【发布时间】：2021-06-18 05:57:02
【问题描述】：

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

【问题讨论】：

我认为您可以使用答案的变体stackoverflow.com/a/53406363/7351882
这能回答你的问题吗？ Equivalent to componentDidUpdate using React hooks
这些就像我们为实现这样的用例而添加的一些额外逻辑，除了这个反应本身不提供其他选项对吗？

标签： reactjs react-native react-hooks

【解决方案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]);

【讨论】：

好的，我明白了。但我真正要问的是考虑我有 2 个函数，函数 A 和函数 B。函数 A 只能在安装组件时立即调用，那时函数 B 不应该被调用，而函数 B 应该只在组件更新时调用那个时间函数 A 不应该调用。我们如何使用 useEffect hook 来实现这一点？

【解决方案2】：

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

这是一个例子

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

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

}, []);


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

【讨论】：

谢谢@Alen.Toma，我也结束了这个。我只是想确保没有内置功能来实现这一点。