React Children 与 Rerender

React 中，State 改变时，会触发当前组件 Rerender。

直白点说，就是 render 函数重新执行一次。

但是通过 props 传入的 children，是不会被 Rerender 的。

于是：

const Parent: React.FC = () => {
  const [count, setCount] = useState<number>(0)

  return (
    <Counter.Provider value={[count, setCount]}>
      <Child />
    </Counter.Provider>
  )
}

可以被优化成：

const Parent: React.FC = () => {
  return (
    <CounterProvider>
      <Child />
    </CounterProvider>
  )
}

const CounterProvider: React.FC = ({ children }) => {
  const [count, setCount] = useState<number>(0)

  return <Counter.Provider>{children}</Counter.Provider>
}

这样当 count 改变的时候，Child 就不会被 Rerender 了。