1. useContext介绍

useContext是react中从根到叶传递信息(向组件树深层传递信息),与props的作用相同,类似useState与useReducer的关系,props处理简单的,父传子之间信息传递,而useContext处理更深层的传递,不需要每一层都加上props,只需要在根组件创建并绑定Context,所有子孙组件都可以使用其Context

2.何时使用useContext

作为props的进阶版,增加useContext和多个props,我们需要对心智负担做一个判断,在临界点的前后,使用useContext或props,假设只有父-子-孙三类组件,使用props足以简洁明了解决传递问题,但当我们的树节点足够长,使用useContext会是更好的解决方案

3.使用方法

使用useContext可以分为三个步骤,分别为: 创建 >> 绑定 >> 使用

1.创建

import { createContext,useContext} from "react"; //引入createContext
 const FontColorContext = createContext(null);
//创建FontColorContext(FontColorContext可任意命名,官方命名方法是`value`+Context)

2.绑定

//Click作为根组件,FontColorContext为创建的Context,并绑定在根目录
const Click: React.FC = () => {
  return (
      <FontColorContext.Provider value="red">
        <Card />
      </FontColorContext.Provider>

  );
};
export default Click;

3.使用

//引入useContext并把根组件传递的值传给fontColor
const Card = () => {
  const fontColor = useContext(FontColorContext);
  return (
   <div style={{ color: fontColor ? fontColor : "#000" }}>如何使用useContext</div>
  );
};

4.进阶

当我们使用props时,会有一个世纪问题,即子组件如何改变父亲组件的state,每个开发者都会遇到,因为react是单向数据流,无法双向绑定,修改父组件的方法无外乎传递setState方法,同样,在useContext中,我们如果需要在子组件修改根组件中的Context,我们需要增加state,使Context可以动态修改,当我们在输入框输入green,blue时,可以发现,字体颜色会重新渲染成新值,代码如下:

//在绑定value的同时,使value是一个state(状态),而不是一个初始值
const Click: React.FC = () => {
const [color,setColor]=useState('red')
  return (
      <FontColorContext.Provider value={color}>
        <Card />
         <input
        type="text"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      </FontColorContext.Provider>
  );
};
export default Click;

5.总结

1.完整代码:

import { createContext,useContext,useState} from "react"; //引入createContext
 const FontColorContext = createContext(null);
const Click: React.FC = () => {
const [color,setColor]=useState('red')
  return (
      <FontColorContext.Provider value={color}>
        <Card />
        <input
        type="text"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      </FontColorContext.Provider>
  );
};

const Card = () => {
  const fontColor = useContext(FontColorContext);
  return (
   <div style={{ color: fontColor ? fontColor : "#000" }}>如何使用useContext</div>
  );
};

export default Click;

2.此例子是一个简单的父子组件传递的例子,完全不必要使用useContext,一个简单的props就可以解决问题,但是在复杂的程序中,如果遇到需要从根组件传递给多个子孙组件的数据,即可以使用useContext,useContext的使用可以增加或减少开发者的心智负担,使用其比较简单,开发程序重要一环是判断是否使用..

最后,站在巨人的肩膀上,勿在浮沙筑高台!