实现 该案例是以中间件调用 nodejs 的公共接口，实现一个数据列表。 源码下载：[链接] 效果预览 用户名和密码都为空 源码下载后执行下面步骤例可查看效果 npm install npm start Redux 中间件的问题之作用域 在 Redux 中使用中间件可以解决很多问题，但也会有个致命...

Redux 复习总结 在前面三篇 Redux 的教程中已详细提到 Redux 的实现，大概可可以总结以下几点 Redux 有Actions、Reducer、Store这三层 通过createStore(reducer)得到store，换名话说store包含了reducer的逻辑实现 通过store.dispath(action)去调用reducer，从而改变s...

结构 component1 actions.js reducer.js component1.js component2 actions.js reducer.js component.js redux tore.js app.js 组件 Component1 action.js {代码...} reducer.js {代码...} component.js {代码...} 组件 component2 action.js {代码...} reducer.js {...

结构 component1 actions.js reducer.js component1.js component2 actions.js reducer.js component.js redux store.js 组件 Component1 action.js {代码...} reducer.js {代码...} component.js {代码...} 组件 component2 action.js {代码...} reducer.js {代码.....

React 不同与双向数据绑定框架，它是单向数据流，所以每次更新都得调用setState，所以在跨组件通信中会比较迂回。还有就是 React 没有逻辑分层，在开发过程中，逻辑分层是很重要的。

通过 URL 映射到对应的功能实现，React 的路由使用要先引入 react-router.js。 注意： react-router 4.0 以上的版本和 3.0 及以下的版本有很大的差别，本教程使用的是 3.0.2 的版本，后续会更新 4.0 以上版本的教程。 在使用 npm 安装时默认是安装最新版本，如果安装...

React 是一个由虚拟 DOM 渲染成真实 DOM 的过程，这个过程称为组件的生命周期。React 把这个周期划分为三个阶段，每个阶段都提供了 will 和 did 两种处理方式，will 是指发生前，did 是指发生后。

组件通信 在这里只讲 React 组件与组件本身的通信，组件通信主要分为三个部分： 父组件向子组件通信：父组件向子组件传参或者是父组件调用子组件的方法 子组件向父组件通信：子组件向父组件传参或者是子组件调用父组件的方法 兄弟组件通信：兄弟组件之间相互传参或调...

React 是个单向数据流的框架，所以在表单元素与其它 DOM 元素有所不同，而且和双向绑定的框架在操作上也有很大不一样。所以在这里单独拿出来说。

普通样式名称使用 —— className app.css {代码...} app.js {代码...} 行内样式 {代码...}

state 可以理解成 props，不一样的在于 props 是只读的，而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树，在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新，从而提升性能。在使用 state　前要先初始化 getInitialState更改...

在所有的事件当中，首先都要弄明白 this 指向哪里。而 React 事件中（如上面的案例）默认的 this 都是 undefined，为了 this 指针能正确指回组件对象本身，通常可以用下面几种方法。

组件渲染 —— 条件渲染（动态组件） 很多情况下组件是动态渲染的，比如登录状态，如果已登录则显示退出登录，否则显示登录 {代码...} 效果预览 组件渲染 —— 列表渲染 React 没有指令，所以在列表渲染时得借助数组来完成。 列表渲染 —— 简单实现 {代码...} 列表渲染 ——...

组件 组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。 在单页面应用(SPA)中扮演着重要角色 组件简单实现 —— 函数式组件 {代码...} 类组件 —— ES5 语法 {代码...} 类组件 —— ES6 语法 {代码...} 效果预览 组件小结 组件名首...

有时候我们在写 html 结构的时候，都没有把对应的结束标识加上，但浏览器能正常解析，但在 jsx 语法当中，则要强制写标准的 html 结构这一段 html　标签在浏览器是能正常解析

图片描述# Vuex在介绍 Vuex 之前，我先抛出一个问题，如下图 请原谅并忽略手绘图的粗糙，主要描述的结构是： 组件A 组件B 组件B1 事件：Event1 事件：Event2 事件：Event3 组件B2 事件：Event1 事件：Event2 事件：Event3 组件C 组件C1 事件：Event1 事件：Event2 事...

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

Action 先引用官方文档的说法 Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 实现上是没问题，action 调用 mutation，但关于异步要放到 action 的说法，个人观点是没有这个必要，在 mutation ...

getters 可以理解为 vuex 中的 computed，和 vue 中的 computed 类似，都是用来计算 state 然后生成新的数据 ( 状态 ) 的。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件，每个 mutation 的方法都会有一个 state 的参数在 commit 的时候当回调形参传过来，该形参就是 store.state