react Hook的useContext数据如何传递

useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享, 避免层层props，也减少子组件重复渲染

import React, { useState, createContext, useContext } from "react";
const CountContext = createContext({});
// 可以是对象也可以是简单数据类型

const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
      // 可以是对象也可以是简单数据类型
      <CountContext.Provider value={{count}}>
        <Counter />
      </CountContext.Provider>
    </div>
  );
};

const Counter = () => {
   // 可以是对象或者简单数据类型
  const {count} = useContext(CountContext);
  return <p>子组件获得的点击数量：{count}</p>;
};

export default Example;

• 性能
  当Provider的value变化时，内部所有消费组件都会重新渲染，并且[useContext]的传播不会受制于shouldComponentUpdate函数，所以父亲组件用了memo，但子组件是context的消费组件，当value变化时，也会重新渲染

链接：
blog.csdn.net/qq_36154157…
www.jianshu.com/p/cc9117872…