最近在写react的项目中使用到了Context和React-Redux发现两者都可以实现数据的向下传递和数据维护,那么既然有个Context为什么还要有React-Redux,在开发中又该用哪种开发方式呢,查阅资料后总结下自己的看法
什么是Context
官方地址: 使用 Context 深层传递参数 – React
react中有状态提升的概念,如果一个状态被兄弟组件都用到的话那么这个状态就可以被提升到共同的父组件然后通过prop传递下去。但是随着组件数的层级越来越多prop的传递也会越来越深这就导致了开发、调试成本的增加。这时候Context就可以解决这个问题。Context可以避免prop的层层传递同时当值发生变化时也可以触发React组件的更新
Context基础用法
- 使用createContext创建Context上下文
- 在根结点使用Context.Provider value属性为需要透传的值
- 在函数组件中使用useContext即可消费数据
const Context = createContext();
function App() {
const [store, setStore] = useState({
name: "zs",
});
const contextVal = {...store, setStore}
return (
<Context.Provider value={contextVal}>
<div>
<PageA /&