react 之 useContext

useContext

概念：useContext 创建上下文，主要是解决组件跨级通信、传值

示例：

步骤1、使用 creatContext 方法创建一个 context 实例对象（通常在组件树的顶层）

import React from 'react';

const MyContext = React.createContext(defaultValue);

备注：这里的 defaultValue 是当组件上层没有匹配的 Provider 时，context 的默认值。

步骤2：使用 Provider 提供值（在组件树中用 Provider 包裹住它的子组件，子组件都能收到provider提供的值）

<MyContext.Provider value={count:1}>
  <Child/>
</MyContext.Provider>

备注：provider 所传的值可以是任何数据类型，且当Provider 的 value 发生变化时，所有使用该 Context 的后代组件都会重新渲染

步骤3：子组件里 使用useContext 访问 provider 传的值

import React, { useContext } from 'react';

function Child() {
  const contextValue = useContext(MyContext);
  return <div>{contextValue}</div>;
}

OK，整个useContext使用步骤基本完成

注意：useContext 不是可以无脑滥用，上面说到 useContext 所传的值变化，下面的所有组件都会重新渲染，这样如果嵌套曾经深、组件复杂的情况下会造成很大的性能开销

解决方案：

1、合理是使用场景：不需要频繁更新的组件使用

2、使用useMemo/useCallBack 等做性能优化