重新渲染的起因：

组件的state变化
父组件重新渲染，导致子组件重新渲染
组件使用context，provider的value发生变化时
hooks变化
- hooks内的状态更改将触发不可避免的宿主重复渲染
- 如果hooks使用了 Context 并且 Context 的值发生了变化，它会触发一个不可避免的重复渲染

渲染优化：

使用memo、useMemo缓存组件
向下移动状态。当前组件很重，但是有个小弹窗是当前组件控制的状态，会导致当前组件重渲染，将控制弹窗的state抽离到一个新组件中，很重的父组件就不会重渲染
将组件抽离为props的children，children在子组件中不会重渲染
将组件作为props传递到子组件，子组件更新不会影响到这个props组件
effect的依赖中有引用类型数据（对象，数组，函数等），应对这些依赖进行useMemo，useCallback
context不在根组件，其祖先更新会导致其更新进而导致使用该context的组件更新，应对该context使用useMemo记忆
使用多层的context，外层的context变化不会影响到内层的context（同上述children）

子组件使用useContext导致的重渲染

// value是个复杂类型的对象，父组件的重渲染会导致重新生成{mode}
const ThemeContext = React.createContext<Theme>({ mode: 'light' });
const useTheme = () => {
  return useContext(ThemeContext);
};
// before:
// 父组件
const [mode, setMode] = useState<Mode>("light");
return (
    <ThemeContext.Provider value={{ mode }}>
      // 这里有个计数器点击+1
      // 这里有个按钮可以切换主题模式
    </ThemeContext.Provider>
  );
const Item = ({ country }: { country: Country }) => {
    // 父组件计数器+1，这里每次会是个新对象，导致重渲染
    const { mode } = useTheme();
    const className = `country-item ${mode === "dark" ? "dark" : ""}`;
    // the rest is the same
}

// after:
const [mode, setMode] = useState<Mode>("light");
// memoising the object! 缓存对象
  const theme = useMemo(() => ({ mode }), [mode]);
return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>Toggle theme</button>
      // 这里有个计数器，可以点击+1
      // 这里有个按钮可以切换主题模式
    </ThemeContext.Provider>
  )
// 子组件
const Item = ({ country }: { country: Country }) => {
    // 父组件计数器+1，这里每次是个同一个theme对象，不会重渲染
    // 切换主题会导致子组件重新渲染
    const { mode } = useTheme();
    const className = `country-item ${mode === "dark" ? "dark" : ""}`;
    // the rest is the same
}

React.memo，配合useCallback将组件缓存

// props中的属性全部使用useMemo进行缓存，MovingComponent 的重渲染不会导致ChildComponent 的重渲染
// 如果props中有函数参数，在父组件中应使用useCallback包裹，以保持父组件每次重渲染时，传递给子组件的函数引用地址一致
// 如果子组件中接收的children和props是组件，则这些组件都需要memo，子组件才不会重渲染
const ChildComponent = (props) {
  ...
  return (
      <div onClick={props.onClick}>{props.a}</div>
  )
}
export default React.memo(ChildComponent)

const MovingComponent = () => {
const [state, setState] = useState({ x: 100, y: 100 });
const onClick = useCallback(() => {
    console.log('xxx')
}, [])
return (
  <div
    onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })}
    style={{ left: state.x, top: state.y }}
  >
    // MovingComponent的重渲染不会导致ChildComponent 的重渲染
    <ChildComponent a={111} onClick={onClick} />
  </div>
);
};

抽离为children，以避免重渲染

# 鼠标移动后，MovingComponent 会重渲染，导致子组件ChildComponent 重渲染，如果后者很“重”，将导致性能问题
const MovingComponent = () => {
  const [state, setState] = useState({ x: 100, y: 100 });

  return (
    <div
      // when the mouse moves inside this component, update the state
      onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })}
      // use this state right away - the component will follow mouse movements
      style={{ left: state.x, top: state.y }}
    >
      <ChildComponent />
    </div>
  );
};
// ChildComponent 通过children 传递，MovingComponent 的重渲染不会导致ChildComponent 重渲染，
// 因为ChildComponent 隶属于组件SomeOutsideComponent，组件作为children传递不会重渲染，因为它是props，
// 它在SomeOutsideComponent 组件中已经创建完毕，已经调用过React.createElement了
const MovingComponent = ({ children }) => {
  const [state, setState] = useState({ x: 100, y: 100 });

  return (
    <div onMouseMove={(e) => setState({ x: e.clientX - 20, y: e.clientY - 20 })} style={{ left: state.x, top: state.y }}>
      // children now will not be re-rendered
      {children}
    </div>
  );
};

const SomeOutsideComponent = () => {
  return (
    <MovingComponent>
      <ChildComponent />
    </MovingComponent>
  );
};

Mystery 1:为什么通过props传递一个组件给子组件，子组件重渲染不会使传递的组件重渲染？

why components that are passed as props don’t re-render?
Answer 1： “children” is a <ChildComponent /> element that is created in SomeOutsideComponent. When MovingComponent re-renders because of its state change, its props stay the same. Therefore any Element (i.e. definition object) that comes from props won’t be re-created, and therefore re-renders of those components won’t happen.

children即<ChildComponent />组件是在SomeOutsideComponent组件中创建的，MovingComponent state变化引起重渲染，但MovingComponent 的props与上次一样没有变化，所以任何来自props的组件（或者自定义对象）不会在MovingComponent 重渲染期间重新创建，自然也不会发生重渲染

Mystery 2: 为什么将props.children通过一个函数传递，会导致重渲染？

if children are passed as a render function, they start re-rendering. Why?

const MovingComponent = ({ children }) => {
  // this will trigger re-render
  const [state, setState] = useState();
  return (
    <div ///...
    >
      <!-- those will re-render because of the state change -->
      {children()}
    </div>
  );
};

const SomeOutsideComponent = () => {
  return (
    <MovingComponent>
      {() => <ChildComponent />}
    </MovingComponent>
  )
}

Answer 2：In this case “children” are a function, and the Element (definition object) is the result of calling this function. We call this function inside MovingComponent, i.e. we will call it on every re-render. Therefore on every re-render, we will re-create the definition object <ChildComponent />, which as a result will trigger ChildComponent’s re-render.

在这个例子中，children是个函数，并且childComponent是调用该函数的结果，MovingComponent的每次重渲染都会在组件内部调用这个函数，返回一个新的结果，所以MovingComponent的每次重渲染会导致childComponent的重渲染

Mystery 3: MovingComponentMemo使用memo，为什么没有阻止由于SomeOutsideComponent 重渲染导致ChildComponent 的重渲染

// wrapping MovingComponent in memo to prevent it from re-rendering
const MovingComponentMemo = React.memo(MovingComponent);

const SomeOutsideComponent = () => {
  // trigger re-renders here with state
  const [state, setState] = useState();

  return (
    <MovingComponentMemo>
      <!-- ChildComponent will re-render when SomeOutsideComponent re-renders -->
      <ChildComponent />
    </MovingComponentMemo>
  )
}

const MovingComponent = ({children}) => <>{children}</>

Answer 3：因为SomeOutsideComponent 的每次重渲染都重新创建了ChildComponent （是个对象），MovingComponentMemo会检查props是否变动，即检查props.children，因为ChildComponent 是重新生成的，与之前的不相等（2个对象的地址不相等），所以会触发重渲染；如果将ChildComponent 使用memo包裹，则MovingComponent的重渲染不会导致ChildComponent 重渲染，因为MovingComponent检查发现这个props与之前的相等

Mystery 4: 将Mystery 2中的函数使用useCallback包裹，还是阻止不了重渲染？

when passing children as a function, why memoizing this function doesn’t work?

const SomeOutsideComponent = () => {
  // trigger re-renders here with state
  const [state, setState] = useState();

  // this memoization doesn't prevent re-renders of ChildComponent
  const child = useCallback(() => <ChildComponent />, []);

  return <MovingComponent>{child}</MovingComponent>;
};

const MovingComponent = ({ children }) => {
  // this will trigger re-render
  const [state, setState] = useState();
  return (
    <div ///...
    >
      <!-- those will re-render because of the state change -->
      {children()}
    </div>
  );
};
child函数被记忆，但是它的返回结果（<ChildComponent />）没有被记忆，同一个函数每次都会执行React.createElement，即重渲染

参考
https://www.developerway.com/posts/react-elements-children-parents

优化react组件非必要的重新渲染