当前位置：首页 > news >正文

主动创新网站内容建设沈阳网站建设

news 2026/5/7 21:12:47

主动创新网站内容建设,沈阳网站建设,做营销看的网站,网页制作成品图文章目录 redux#xff1f;工作原理如何使用后言 redux#xff1f; React是用于构建用户界面的#xff0c;帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件#xff0c;每个组件的state是由自身进行管理#xff0c;包括组件定义自身的state、组件之间的通信通… 文章目录 redux工作原理如何使用后言 redux React是用于构建用户界面的帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件每个组件的state是由自身进行管理包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享如果让每个组件都存储自身相关的状态理论上来讲不会影响应用的运行但在开发及后续维护阶段我们将花费大量精力去查询状态的变化过程这种情况下如果将所有的状态进行集中管理当需要更新状态的时候仅需要对这个管理集中处理而不用去关心状态是如何分发到每一个组件内部的 redux就是一个实现上述集中管理的容器遵循三大基本原则单一数据源 state 是只读的使用纯函数来执行修改注意的是redux并不是只应用在react中还与其他界面库一起使用如Vue 工作原理 redux要求我们把数据都放在 store公共存储空间一个组件改变了 store 里的数据内容其他组件就能感知到 store的变化再来取数据从而间接的实现了这些数据传递的功能工作流程图如下所示 ![根据流程图可以想象React Components 是借书的用户 Action Creactor 是借书时说的话(借什么书) Store 是图书馆管理员Reducer 是记录本(借什么书还什么书在哪儿需要查一下) state 是书籍信息整个流程就是借书的用户需要先存在然后需要借书需要一句话来描述借什么书图书馆管理员听到后需要查一下记录本了解图书的位置最后图书馆管理员会把这本书给到这个借书人转换为代码是React Components 需要获取一些数据, 然后它就告知 Store 需要获取数据这就是就是 Action Creactor , Store 接收到之后去 Reducer 查一下 Reducer 会告诉 Store 应该给这个组件什么数据如何使用创建一个store的公共数据区域 import { createStore } from redux // 引入一个第三方的方法 const store createStore() // 创建数据的公共存储区域管理员还需要创建一个记录本去辅助管理数据也就是reduecer本质就是一个函数接收两个参数stateaction返回state // 设置默认值 const initialState {counter: 0 }const reducer (state initialState, action) { }然后就可以将记录本传递给store两者建立连接。如下 const store createStore(reducer)如果想要获取store里面的数据则通过store.getState()来获取当前state console.log(store.getState());下面再看看如何更改store里面数据是通过dispatch来派发action通常action中都会有type属性也可以携带其他的数据 store.dispatch({type: INCREMENT })store.dispath({type: DECREMENT })store.dispatch({type: ADD_NUMBER,number: 5 })下面再来看看修改reducer中的处理逻辑 const reducer (state initialState, action) {switch (action.type) {case INCREMENT:return {...state, counter: state.counter 1};case DECREMENT:return {...state, counter: state.counter - 1};case ADD_NUMBER:return {...state, counter: state.counter action.number}default: return state;} }注意reducer是一个纯函数不需要直接修改state 这样派发action之后既可以通过store.subscribe监听store的变化如下 store.subscribe(() {console.log(store.getState()); })在React项目中会搭配react-redux进行使用完整代码如下 const redux require(redux);const initialState {counter: 0 }// 创建reducer const reducer (state initialState, action) {switch (action.type) {case INCREMENT:return {...state, counter: state.counter 1};case DECREMENT:return {...state, counter: state.counter - 1};case ADD_NUMBER:return {...state, counter: state.counter action.number}default: return state;} }// 根据reducer创建store const store redux.createStore(reducer);store.subscribe(() {console.log(store.getState()); })// 修改store中的state store.dispatch({type: INCREMENT }) // console.log(store.getState());store.dispatch({type: DECREMENT }) // console.log(store.getState());store.dispatch({type: ADD_NUMBER,number: 5 }) // console.log(store.getState());小结 createStore可以帮助创建 storestore.dispatch 帮助派发 action , action 会传递给 storestore.getState 这个方法可以帮助获取 store 里边所有的数据内容store.subscrible 方法订阅 store 的改变只要 store 发生改变store.subscrible 这个函数接收的这个回调函数就会被执行后言创作不易要是本文章对广大读者有那么一点点帮助不妨三连支持一下您的鼓励就是博主创作的动力

查看全文

http://www.hkea.cn/news/14573096/