Re-render

一个 React 组件会在其 props 或者 state 更新时，触发 re-render，但这并不意味着组件内部的 DOM 均会经过卸载、再挂载的过程。React 内部会通过 diff 算法去计算 DOM 更新前后的差异，只有差异的部分会被更新。

re-render 时，一个函数式组件函数体中的代码均会重新执行一次。

特殊情况

React hooks 可以为 re-render 带来一些特殊的规则。

useRef

useRef 可以让我们保存一些值，并且在值更新的时候，React 不会触发 re-render。

function SomeComponent() {
  const someRef = useRef<number>(0);
  function handleClick() {
    someRef.current = 10;
    // 赋值后，React 不会 `re-render`
  }
  return <button onClick={handleClick}>Click me!</button>;
}

useEffect

useEffect(() => {
  // someCode
  // 组价挂载后执行 someCode，deps 中的值更新后执行 someCode
}, [deps]);

当组件挂载后和 deps 更新后均会执行一次 someCode。需要注意的是：与 deps 数组无关的值造成的 re-render 不会触发 someCode 的执行。

useLayoutEffect

与 useEffect 使用方式一致。当你遇到影响布局的副作用时，再考虑使用 useLayoutEffect。