30秒学会 React 片段 · 2022年12月27日

30秒学会 React 片段 – React useComponentDidUpdate hook

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 of mounted to true 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