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;