Redux原理（逐句解析）！！！

React
reduc 是（React全家桶）的核心成员
一、什么是Redux？

我们一直通过属性来进行组件中的数据传递,这种模式是非常脆弱的。
在日常的开发中经常会遇到非父子组件传递的场景。原来的方式是找到共同的父级进行数据交互，这时通信就变得比较麻烦我们先通过一个简单的例子实现一下redux的工作模式:

二、Redux原理（逐句解析）

1、这里我们可以将 renderContent,renderTitle看成两个组件通过一个函数 renderApp将相关的数据统一进行管理。

function renderTitle(title,oldTitle={}){if(title === oldTitle)return;let ele = document.getElementById('title');ele.style.color = title.color;ele.innerHTML = title.text;
}
function renderContent(content,oldContent={}){if(content === oldContent)return;let ele = document.getElementById('content');ele.style.color = content.color;ele.innerHTML = content.text;
}
function renderApp(appState,oldAppState={}) {if(appState === oldAppState)return;renderTitle(appState.title,oldAppState.title);renderContent(appState.content,oldAppState.conent)
}

2、我们将最新状态放到了createStore函数中，生成 dispatch函数，操作 state，触发视图更新。

function createStore(reducer){<-- 给 state一个为 null的初始值 -->let state;<-- 创建一个放置事件的事件池(数组) -->const listener = [];<-- 这个函数负责向事件池中添加事件； -->const subscribe = (f)=>listener.push(f);<-- 这个函数负责获取当前 state值，创造一份和状态同样的对象给外界来用 -->const getState = ()=>{return state};<-- 获取旧的 state值 -->let oldState = state;<-- 这个函数负责获取当前用户传输的 action实参 -->const dispatch = (action)=>{<-- 获取曾经还未覆盖的 state值 -->oldState = state;<-- 获取当前 state值覆盖掉旧的 state值 -->state = reducer(state,action);<-- 更新完成之后 重新渲染，把 state上一次旧的值 oldState添加到事件池 -->listener.forEach(item => item && item(oldState));}<-- 默认传入空对象获取reducer返回的默认结果，为了初始化数据 -->dispatch({})return {getState,dispatch,subscribe,listener}
}

3、使用 reducer方法进行状态的更改,派发一个带有type的属性来进行状态的更改，来获取 state的最新值reducer应该具有默认状态,当更改状态后使用最新的状态。

function reducer(state,action){<-- 当循环上下文未找到 start相应的值时，给予 start的一个初始的默认状态 -->if(!state){return {title:{text:'标题',color:"red"},content:{text:"内容",color:'blue'}}}<-- 依据 type的属性，对 state的状态进行更改 -->switch(action.type){case "UPDATE_TITLE":// state.title.text = action.text;return {...state,<-- 当前 title覆盖上一行 state中的state.title -->title:{...state.title,<-- 当前 text覆盖上一行 state.title中的state.title.text -->text:action.text,}}break;case "UPDATE_CONTENT":// state.content.text = action.text;return {...state,<-- 当前 content覆盖上一行 state中的state.content -->content:{...state.content,<-- 当前 text覆盖上一行 state.title中的state.title.content -->text:action.text,}}break;default:<-- 若以上 case判断条件不符，则返回原来的 state -->return statebreak;}
}

4、向相关函数传输实参，拿到相关函数执行后，返回的数据，触发视图更新

<-- 拿到createStore中返回的对象 -->
const store = createStore(reducer);
<-- 更新完成之后 重新渲染，把 state上一次旧的值 oldState添加到事件池 -->
store.subscribe((oldState)=>{renderApp(store.getState(),oldState)});
<-- 这个事件负责把修改完内容后重新渲染一下，让数据修改完成之后 自动更新视图 -->
renderApp(store.getState());
<-- 向相关函数名及对应type值进行参数更新 -->
store.dispatch({type:"UPDATE_TITLE",text:"修改过的标题3"});
<-- 向相关函数名及对应type值进行参数更新 -->
store.dispatch({type:"UPDATE_CONTENT",text:"修改过的内容3"});

Redux原理（逐句解析）！！！相关推荐

路由及路由器工作原理深入解析3：路由与port
日志"路由及路由器工作原理深入解析1"http://user.qzone.qq.com/2756567163/blog/1438322342介绍了"为什么要使用路 ...
js 数组实现完全树_JavaScript的工作原理：解析、抽象语法树（AST）+ 提升编译速度5个技巧
摘要: JS的"编译原理". 原文:JavaScript的工作原理:解析.抽象语法树(AST)+ 提升编译速度5个技巧作者:前端小智 Fundebug经授权转载,版权归原作者所有 ...
php 模板解析,关于模板的原理和解析
PHP – 关于模板的原理和解析将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是web模板,是主要由HTML标记组成的语言来编写的语言, ...
DNS原理及其解析过程精彩剖析
DNS原理及其解析过程精彩剖析网络通讯大部分是基于TCP/IP的,而TCP/IP是基于IP地址的,所以计算机在网络上进行通讯时只能识别如"202.96.134.133"之类的I ...
python解析器原理_Python程序运行原理图文解析
本文研究的主要是Python程序运行原理,具体介绍如下. 编译型语言(C语言为例) 动态型语言一个程序是如何运行起来的?比如下面的代码 #othermodule.py def add(a, b): ...
mysql哨兵机制_Redis 哨兵机制以及底层原理深入解析，这次终于搞清楚了
前面我们基于实际案例搭建了缓存高可用方案(分布式缓存高可用方案,我们都是这么干的)同时提到了redis主从架构下是如何保证高可用的,讲到了它是通过redis sentinel的机制来实现的. 今天我们 ...
bobsmith电路阻抗原理_串联谐振原理全解析 - 赫兹电力
串联谐振赫兹电力为您导读:串联谐振原理全解析,串联谐振交流耐压试验在发电机绝缘试验中占据至关重要的地位,今天我们就来系统学习一下如何谐振及其原理解析吧. 谐振基础知识谐振电路是在具有电阻R.电感L. ...
oracle INS-40930,Oracle 并行原理深入解析及案例精粹
Oracle 并行原理深入解析及案例精粹 [日期:2012-08-12] 来源:Linux社区作者:Leonarding [字体:大中小] (12)sqlload直接加载对索引的影响所谓对索引 ...
Android-skin-support 换肤原理全面解析
一.背景公司业务上需要用到换肤.为了不重复造轮子,并且快速实现需求,并且求稳,,于是到Github上找了一个star数比较多的换肤框架-Android-skin-support(一款用心去做的And ...

Redux原理（逐句解析）！！！

Redux原理（逐句解析）！！！相关推荐

最新文章

热门文章