useContext

概念：useContext 創(chuàng)建上下文，主要是解決組件跨級(jí)通信、傳值

示例：

步驟1、使用 creatContext 方法創(chuàng)建一個(gè) context 實(shí)例對(duì)象（通常在組件樹的頂層）

import React from 'react';

const MyContext = React.createContext(defaultValue);

備注：這里的 defaultValue 是當(dāng)組件上層沒有匹配的 Provider 時(shí)，context 的默認(rèn)值。

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

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

備注：provider 所傳的值可以是任何數(shù)據(jù)類型，且當(dāng)Provider 的 value 發(fā)生變化時(shí)，所有使用該 Context 的后代組件都會(huì)重新渲染

步驟3：子組件里 使用useContext 訪問 provider 傳的值

import React, { useContext } from 'react';

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

OK，整個(gè)useContext使用步驟基本完成

注意：useContext 不是可以無腦濫用，上面說到 useContext 所傳的值變化，下面的所有組件都會(huì)重新渲染，這樣如果嵌套曾經(jīng)深、組件復(fù)雜的情況下會(huì)造成很大的性能開銷

解決方案：

1、合理是使用場(chǎng)景：不需要頻繁更新的組件使用

2、使用useMemo/useCallBack 等做性能優(yōu)化