useContext

每天吃饭的羊2023-09-22 4:09

1、在大厂已经使用useContext来代替Redux等状态管理工具

2、在众多react状态管理工具中，MobX和Redux-Saga提供了异步方法。

3、Mobx，Redux，Saga，DVA, ZuStand是比较常见的，也有redux-saga,react-redux等

4、在Redux中，异步操作需要借助第三方库reduc-thunk、redux-promise、redux-saga等。在Mobx中（OOP 风格），可以直接定义异步action，只需要写成generator形式的函数即可。

5、习惯了Vuex、Pinia那一套，推荐使用Mobx。如果是大项目，大团队协作开发推荐使用Redux。

6、Prop Drilling就是一种传值方式，具体表现为父->子->孙，子组件不会使用的到，只在孙组件使用，代码冗余，不好维护。

复制代码

import { useState, createContext, useContext } from "react";

const UserContext = createContext(null);

const Example2 = () => {
  return (
    <div>
      <Parent />
    </div>
  );
};

const Parent = () => {
  const [username, setUsername] = useState("liuyi");

  return (
    <UserContext.Provider value={{ username, setUsername }}>
      <h1>父组件</h1>
      你好 {username}
      <Child />
    </UserContext.Provider>
  );
};

const Child = () => {
  const { username, setUsername } = useContext(UserContext);
  return (
    <div>
      <h2>子组件 {username}</h2>
      <GrandChild />
    </div>
  );
};

const GrandChild = () => {
  const { setUsername } = useContext(UserContext);
  return (
    <div>
      <h3>孙组件</h3>
      <button
        onClick={() => {
          setUsername("xiaobai");
        }}
      >
        修改用户名
      </button>
    </div>
  );
};

export default Example2;