useContext

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;
相关推荐
没有黑科技3 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见13 分钟前
彻底搞懂前端环境变量使用和原理
前端
小王码农记25 分钟前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥32 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x36 分钟前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
麻花20131 小时前
WPF里面的C1FlexGrid表格控件添加RadioButton单选
java·服务器·前端
理想不理想v1 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试
羊子雄起1 小时前
CKEditor前端样式和编辑器的样式不一致的问题
前端·编辑器
聊无生2 小时前
JavaSrcipt 函数高级
开发语言·前端·javascript
xiyusec2 小时前
HTML基础
前端·html