根据文档：
componentDidUpdate()在更新发生后立即被调用。初始渲染未调用此方法。
我们可以使用新的useEffect()钩子来模拟componentDidUpdate()，但似乎useEffect()在每次渲染后都被运行，甚至是第一次。如何使它不能在初始渲染上运行？
如下面的示例所示，componentDidUpdateFunction在初始渲染期间被打印，而componentDidUpdateClass在初始渲染期间未被打印。
function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidUpdate() {
console.log("componentDidUpdateClass");
}
render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Click Me
</button>
</div>
);
}
}
ReactDOM.render(
<div>
<ComponentDidUpdateFunction />
<ComponentDidUpdateClass />
</div>,
document.querySelector("#app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 0 :(得分：16)
We can use the useRef hook to store any mutable value we like，因此我们可以使用它来跟踪useEffect函数是否是第一次运行。
如果我们希望效果与componentDidUpdate处于同一阶段运行，则可以改用useLayoutEffect。
示例
const { useState, useRef, useLayoutEffect } = React;
function ComponentDidUpdateFunction() {
const [count, setCount] = useState(0);
const firstUpdate = useRef(true);
useLayoutEffect(() => {
if (firstUpdate.current) {
firstUpdate.current = false;
return;
}
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<ComponentDidUpdateFunction />,
document.getElementById("app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 1 :(得分：9)
您可以将其变成custom hooks，如下所示：
import React, { useEffect, useRef } from 'react';
const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);
useEffect(() => {
if (didMount.current) func();
else didMount.current = true;
}, deps);
}
export default useDidMountEffect;
用法示例：
import React, { useState, useEffect } from 'react';
import useDidMountEffect from '../path/to/useDidMountEffect';
const MyComponent = (props) => {
const [state, setState] = useState({
key: false
});
useEffect(() => {
// you know what is this, don't you?
}, []);
useDidMountEffect(() => {
// react please run me if 'key' changes, but not on initial render
}, [state.key]);
return (
<div>
...
</div>
);
}
// ...
答案 2 :(得分：8)
我制作了一个简单的useFirstRender钩子来处理诸如着眼于表单输入的情况：
import { useRef, useEffect } from 'react';
export function useFirstRender() {
const firstRender = useRef(true);
useEffect(() => {
firstRender.current = false;
}, []);
return firstRender.current;
}
它以true开始，然后切换到false中的useEffect，后者仅运行一次，再也不会运行。
在您的组件中，使用它：
const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);
useEffect(() => {
if (firstRender || errors.phoneNumber) {
phoneNumberRef.current.focus();
}
}, [firstRender, errors.phoneNumber]);
对于您的情况，您只需使用if (!firstRender) { ...。
答案 3 :(得分：3)
@ravi，您不调用传入的卸载功能。这是一个更完整的版本：
/**
* Identical to React.useEffect, except that it never runs on mount. This is
* the equivalent of the componentDidUpdate lifecycle function.
*
* @param {function:function} effect - A useEffect effect.
* @param {array} [dependencies] - useEffect dependency list.
*/
export const useEffectExceptOnMount = (effect, dependencies) => {
const mounted = React.useRef(false);
React.useEffect(() => {
if (mounted.current) {
const unmount = effect();
return () => unmount && unmount();
} else {
mounted.current = true;
}
}, dependencies);
// Reset on unmount for the next mount.
React.useEffect(() => {
return () => mounted.current = false;
}, []);
};
答案 4 :(得分：0)
@MehdiDehghani，您的解决方案工作得很好，您要做的一项附加工作就是卸载，将didMount.current的值重置为false。何时尝试在其他地方使用此自定义钩子，您不会获得缓存值。
import React, { useEffect, useRef } from 'react';
const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);
useEffect(() => {
let unmount;
if (didMount.current) unmount = func();
else didMount.current = true;
return () => {
didMount.current = false;
unmount && unmount();
}
}, deps);
}
export default useDidMountEffect;
答案 5 :(得分：0)
这是我迄今为止使用 typescript 创建的最佳实现。基本上，想法是一样的，使用 Ref 但我也在考虑 useEffect 返回的回调来执行组件卸载的清理。
import {
useRef,
EffectCallback,
DependencyList,
useEffect
} from 'react';
/**
* @param effect
* @param dependencies
*
*/
export default function useNoInitialEffect(
effect: EffectCallback,
dependencies?: DependencyList
) {
//Preserving the true by default as initial render cycle
const initialRender = useRef(true);
useEffect(() => {
let effectReturns: void | (() => void) = () => {};
// Updating the ref to false on the first render, causing
// subsequent render to execute the effect
if (initialRender.current) {
initialRender.current = false;
} else {
effectReturns = effect();
}
// Preserving and allowing the Destructor returned by the effect
// to execute on component unmount and perform cleanup if
// required.
if (effectReturns && typeof effectReturns === 'function') {
return effectReturns;
}
return undefined;
}, dependencies);
}
您可以像使用 useEffect 钩子一样简单地使用它，但这一次，它不会在初始渲染上运行。下面是如何使用这个钩子。
useuseNoInitialEffect(() => {
// perform something, returning callback is supported
}, [a, b]);
答案 6 :(得分：0)
与 Tholle's answer 相同的方法，但使用 useState 而不是 useRef。
const [skipCount, setSkipCount] = useState(true);
...
useEffect(() => {
if (skipCount) setSkipCount(false);
if (!skipCount) runYourFunction();
}, [dependencies])