根据文件:
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>
如果你想跳过第一次渲染，你可以创建一个状态“firstRenderDone”，并在useEffect中使用空依赖列表将其设置为true(就像didMount一样)。然后，在你的另一个useEffect中，你可以检查第一个渲染是否已经在做某事之前完成。
const [firstRenderDone, setFirstRenderDone] = useState(false);
//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
setFirstRenderDone(true);
}, []);
// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
if(firstRenderDone){
console.log("componentDidUpdateFunction");
}
}, [firstRenderDone]);
@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;
}, []);
};
如果你想跳过第一次渲染，你可以创建一个状态“firstRenderDone”，并在useEffect中使用空依赖列表将其设置为true(就像didMount一样)。然后，在你的另一个useEffect中，你可以检查第一个渲染是否已经在做某事之前完成。
const [firstRenderDone, setFirstRenderDone] = useState(false);
//useEffect with empty dependecy list (that works like a componentDidMount)
useEffect(() => {
setFirstRenderDone(true);
}, []);
// your other useEffect (that works as componetDidUpdate)
useEffect(() => {
if(firstRenderDone){
console.log("componentDidUpdateFunction");
}
}, [firstRenderDone]);
与Tholle的答案相同，但使用useState而不是useRef。
const [skipCount, setSkipCount] = useState(true);
...
useEffect(() => {
if (skipCount) setSkipCount(false);
if (!skipCount) runYourFunction();
}, [dependencies])
EDIT
虽然这也可以工作，但它涉及到更新状态，这会导致组件重新呈现。如果你的组件的所有useEffect调用(以及它的所有子组件)都有一个依赖数组，这没有关系。但是请记住，任何没有依赖数组的useEffect(useEffect(() =>{…})将再次运行。
使用和更新useRef不会导致任何重渲染。
我认为创建一个自定义钩子将是多余的，我不想通过使用useLayoutEffect钩子的一些与布局无关的东西来混淆我的组件的可读性，所以，在我的情况下，我只是检查我的有状态变量selectedItem的值是否触发useEffect回调是它的原始值，以确定它是否是初始渲染:
export default function MyComponent(props) {
const [selectedItem, setSelectedItem] = useState(null);
useEffect(() => {
if(!selectedItem) return; // If selected item is its initial value (null), don't continue
//... This will not happen on initial render
}, [selectedItem]);
// ...
}
