如何检测组件将使用反应挂钩更新？

Posted 2023-04-09

【中文标题】如何检测组件将使用反应挂钩更新？

【英文标题】：How to detect a component will be updated with react hooks?

【发布时间】：2020-09-12 20:51:52

【问题描述】：

React hooks 提供了模仿生命周期方法 componentDidUpdate 和 useEffect 而没有依赖关系的可能性：

useEffect(() => 
   // componentDidUpdate
);

如何检测是否有一些 prop GOING 要用 react hooks 更新？

需要在某些更改之前执行一些代码。

【参考方案1】：

只要组件重新渲染，就会调用没有依赖关系的 useEffect。这就像componentDidMount 和componentDidUpdate 的组合

但是，如果您希望跟踪特定的道具更改，可以将其添加到 dependency array of useEffect

useEffect(() => 
   // called on change of props.somename as well as initial render
, [props.somename]);

还可以查看以下帖子，了解有关使用 useEffect 模拟生命周期方法以及仅在更新时执行 useEffect 的更多详细信息

React hooks useEffect only on update?

ReactJS lifecycle method inside a function Component

附：您可以根据需要向依赖项数组添加多个值

【参考方案2】：

如果您试图模仿componentWillReceiveProps 的行为，您可以轻松地将您的逻辑放入组件的主体中：

function MyComponent(props) 
  // do stuff with props (it's like componentWillReceiveProps)
  return (...);

你不需要钩子。

请记住，useEffect 在您的组件使用这些道具渲染后运行，而不是在之前运行。

newProps -> MyComponent is called -> DOM updated -> useEffect called