Executes a callback immediately after a component is updated.
- Use the
useRef()
hook to create a variable,mounted
, that tracks if the component has been mounted. - Use the
useEffect()
hook to set the value ofmounted
totrue
the first time the hook is executed. - Run the provided
callback
on subsequent hook executions. - Providing a dependency array for the second argument,
condition
, will only execute the hook if any of the dependencies change. - Behaves like the
componentDidUpdate()
lifecycle method of class components.
代码实现
const useComponentDidUpdate = (callback, condition) => {
const mounted = React.useRef(false);
React.useEffect(() => {
if (mounted.current) callback();
else mounted.current = true;
}, condition);
};
使用样例
const App = () => {
const [value, setValue] = React.useState(0);
const [otherValue, setOtherValue] = React.useState(1);
useComponentDidUpdate(() => {
console.log(`Current value is ${value}.`);
}, [value]);
return (
<>
<p>
Value: {value}, other value: {otherValue}
</p>
<button onClick={() => setValue(value + 1)}>Increment value</button>
<button onClick={() => setOtherValue(otherValue + 1)}>
Increment other value
</button>
</>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);
翻译自:https://www.30secondsofcode.org/react/s/use-component-did-update