【React】hooks 之 useContext

1 useState
2 useEffect
3 useContext
4 useReducer

---

3 useContext() 共享状态钩子

useContext 的作用是 实现数据共享，解决组件间传值 的问题，可以跨组件层级直接传递变量。即是对它所包含的组件树提供全局共享数据的一种技术。

3.1 创建 Context

根组件引入 createContext 方法，并创建 Context

import React, { createContext } from 'react';

const ContextName = createContext();

3.2 向后代组件传值

在根组件中使用 ContextName.Provider 组件包裹需要接受数据的后代组件，

并通过 value 属性提供要共享的数据。

<ContextName.Provider value={count}>
    <Child />
</ContextName.Provider>

3.3 后代组件获取传递进来的值

在后代组件中使用 useCountext 获取根组件传递进来的值，

向 useContext 传入根组件中定义的ContextName

import React, { useContext } from 'react';

const Child = () => {
  const count = useContext(ContextName);
  return <p>子组件获得的点击数量：{count}</p>;
};

3.4 完整示例

import React, { useState, createContext, useContext } from "react";
const ContextName = createContext();

const Child = () => { // 后代组件
  const count = useContext(ContextName);
  return <p>子组件获得的点击数量：{count}</p>;
};

const Parent = () => { // 根组件
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
      <ContextName.Provider value={count}>
        <Child />
      </ContextName.Provider>
    </div>
  );
};

export default Parent;