React hooks提供了使用useEffect无依赖地模仿生命周期方法componentDidUpdate的可能性：
useEffect
componentDidUpdate
useEffect(() => { // componentDidUpdate });
我如何检测一些 prop 是否会用react钩子更新？我需要在更改之前执行一些代码。
cyvaqqii1#
每当组件重新呈现时，将调用不带依赖项的useEffect。这类似于componentDidMount和componentDidUpdate的组合但是，如果您希望跟踪特定的 prop 更改，则可以将其添加到dependency array of useEffect
componentDidMount
dependency array of useEffect
useEffect(() => { // called on change of props.somename as well as initial render }, [props.somename]);
还可以查看下面的帖子，了解有关使用useEffect模拟生命周期方法以及仅在更新时执行useEffect的更多细节React hooks useEffect仅在更新时生效？ReactJS生命周期方法在函数组件中P.S.你可以根据你的需求向依赖数组添加多个值
70gysomp2#
如果你试图模仿componentWillReceiveProps的行为，你可以很容易地把你的逻辑放在组件的主体中：
componentWillReceiveProps
function MyComponent(props) { // do stuff with props (it's like componentWillReceiveProps) return (...); }
你不需要钩子。请记住，useEffect在使用这些 prop 渲染组件 * 之后 * 而不是 * 之前 * 运行。newProps -> MyComponent is called -> DOM updated -> useEffect called
newProps -> MyComponent is called -> DOM updated -> useEffect called
2条答案
按热度按时间cyvaqqii1#
每当组件重新呈现时，将调用不带依赖项的useEffect。这类似于
componentDidMount和componentDidUpdate的组合但是，如果您希望跟踪特定的 prop 更改，则可以将其添加到
dependency array of useEffect还可以查看下面的帖子，了解有关使用useEffect模拟生命周期方法以及仅在更新时执行useEffect的更多细节
React hooks useEffect仅在更新时生效？
ReactJS生命周期方法在函数组件中
P.S.你可以根据你的需求向依赖数组添加多个值
70gysomp2#
如果你试图模仿
componentWillReceiveProps的行为，你可以很容易地把你的逻辑放在组件的主体中：你不需要钩子。
请记住，useEffect在使用这些 prop 渲染组件 * 之后 * 而不是 * 之前 * 运行。
newProps -> MyComponent is called -> DOM updated -> useEffect called