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;
相关推荐
我要洋人死12 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人24 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人24 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR29 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香31 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969334 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai40 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress