AnitaSun的博客

在使用JSX的代码文件中，即使代码中并没有直接使用React，也一定要导入这个React，这是因为JSX最终会被转译成依赖于React的表达式JSX所谓JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript中可以编写像HTML一样的代码在JSX中可以通过onClick这样的方式给一个元素添加一个事件处理函数JSX是进步还是倒退以前用HTML来代表内容，用CSS代表样式，用JavaScript来定义交互行为，这三种语言分在三种不同的文件里面，实际上是把.

引入中间件：仅限于dispatch方法，也就是从dispatch函数调用到action对象被reducer处理这个过程中的操作Store Enhancer：对ReduxStore进行更深层次的增强定制增强器的接口一个什么都不做的Store Enhancer长得这个样子利用所给的参数创造出一个store对象，然后定制store对象，最后把store对象返回去就可以一个store对象中包含下列接口□ dispatch□ subscribe□ getState□ replaceRedu

概述中间件这种架构设计使得可以重用通用逻辑，通过组合不同中间件可以完成复杂功能中间件的特点：中间件是独立的函数；中间件可以组合使用；中间件有一个统一的接口。能够在一个Redux Store上组合使用多个中间件。这些中间件按照指定顺序依次处理传入的action，只有排在前面的中间件完成任务之后，后面的中间件才有机会继续处理action。当然，每个中间件都可以中断对于某个action的“管道”，也就是不用后面的中间件继续处理了。中间件接口在action对象进入reducer之前，会经历中间

action 构造函数测试测试actions.jsimport {ADD_TODO, TOGGLE_TODO, REMOVE_TODO} from './actionTypes.js';let nextTodoId = 10;export const addTodo = (text) => ({ type: ADD_TODO, completed: false, id: nextTodoId ++, text: text});export const toggleTo

单元测试的原则Redux的功能由众多函数组成，这些函数中不少依然是纯函数，测试一个根据输入返回输出的纯函数，要比测试一个包含很多状态的对象容易得多。单元测试环境搭建单元测试框架Mocha + Chai在create-react-app创建的应用中自带了Jest库使用npm run test就会进入单元测试的界面Jest测试一个根据输入返回输出的纯函数，要比测试一个包含很多状态的对象容易得多文件名以．test.js为后缀的代码文件；存于__test__目录下的代码文件。两种测试代码

辅助进行异步操作的库redux-sagaredux-effectsredux-side-effectsredux-loopredux-observable如何挑选异步操作方式在Redux的单向数据流中，什么时机插入异步操作对应库的大小如何学习曲线是不是太陡是否会和其他Redux库冲突利用Promise实现异步操作□ redux-promise□ redux-promises（名字只比上面的多了一个表示复数的s）□ redux-simple-promise□ redux

在在React应用中使用浏览器原生支持的fetch函数来访问网络资源，fetch函数返回的结果是一个Promise对象，Promise模式能够让需要异步处理的代码简洁清晰代理功能访问API在package.json中添加下面一行：{ "name": "weather_react", "version": "0.1.0", "private": true, // 在这里 "proxy": "http://www.weather.com.cn/", "devDependenci.

介绍实例CountDown定义一个名为CountDown的组件，这个CountDown可以接受一个初始值作为当前数字，然后每隔一秒钟调用一次函数形式的子组件，同时把当前数字减1，如此重复，直到当前数字减为0CountDown 组件的代码import React from 'react';class CountDown extends React.Component { constructor() { super(...arguments); this.state = {

一个高阶组件就是一个函数，这个函数接受一个组件作为输入，然后返回一个新的组件作为结果而且，返回的新组件拥有了输入组件所不具有的功能例：好处：重用代码：提取出来逻辑，利用高阶组件的方式应用出去，就可以减少很多组件的重复代码修改现有React组件的行为：有些现成React组件并不是开发者自己开发的，来自于第三方，希望修改里面的逻辑高阶组件实现方式代理方式的高阶组件继承方式的高阶组件高阶组件的显示名增加“显示名”的方式就是给高阶组件类的displayName赋上一个字符串类型的.

继承方式的高阶组件采用继承关系关联作为参数的组件和返回的组件在代理方式下，render函数中的使用被包裹组件是通过JSX代码在代理方式下产生的新组件和参数组件是两个不同的组件，一次渲染，两个组件都要经历各自的生命周期在继承方式下，render函数中渲染被包裹组件的代码如下在继承方式下两者合二为一，只有一个生命周期继承方式的高阶组件可以应用于下列场景操纵prop除了上面不安全的直接修改this.props方法，还可以利用React.cloneElement让组件从新绘制唯一用得.

如果高阶组件要做的功能不涉及除了render之外的生命周期函数，也不需要维护自己的状态，那也可以干脆返回一个纯函数应用操纵prop访问ref访问ref并不是值得推荐的React组件使用方式当linkRef被调用时就得到了被包裹组件的DOM实例，记录在this._root中说它非常有用，是因为只要获得了对被包裹组件的ref引用，那它基本上就无所不能，因为通过这个引用可以任意操纵一个组件的DOM元素。说它没什么用，是因为ref的使用非常容易出问题，我们已经知道最好能用“控制中的组件”.

引入获取当前应该显示的待办事项，就是根据Redux Store状态树上的todos和filter两个字段上的值计算出来。但这个计算过程要遍历todos字段上的数组，当数组比较大的时候，对于TodoList组件的每一次重新渲染都重新计算一遍，就会显得负担过重了。两阶段选择过程如果Redux Store状态树上代表所有待办事项的todos字段没有变化，而且代表当前过滤器的filter字段也没有变化，那么实在没有必要重新遍历整个todos数组来计算一个新的结果reselect库的工作原理：只要相关

引入多个React组件中，React组件也要考虑三个阶段：装载阶段、更新阶段和卸载阶段。装载阶段：从这个React组件往下的所有子组件，都要经历一遍React组件的装载生命周期，因为这部分的工作没有什么可以省略的。卸载阶段：只有一个生命周期函数componentWillUnmount，这个函数做的事情只是清理componentDidMount添加的事件处理监听等收尾工作，也没有什么可优化的空间。React的调和(Reconciliation)过程调和：React在更新阶段很巧妙地对比原有的V

单个React组件的性能优化React利用Virtual DOM来提高渲染性能，虽然每一次页面更新都是对组件的重新渲染，但是并不是将之前渲染的内容全部抛弃重来，借助Virtual DOM, React能够计算出对DOM树的最少修改，这就是React默认情况下渲染都很迅捷的秘诀。性能优化的时机：我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的那另外3%的代码。”——高德纳React-Redux的shouldComponentUpdat

模块化应用要点代码文件的组织结构；确定模块的边界；Store的状态树设计。代码文件的组织方式按角色组织在MVC下：因为MVC存在很多缺点，所以不会使用MVC在Redux应用的构建中，受MVC这种"按角色组织的影响"，有这样一种代码组织方式。但是不利于应用的扩展。按功能组织把完成同一应用功能的代码放在一个目录下，在Redux中，不同的角色就是reducer，actions和视图模块接口在最理想的情况下，我们应该通过增加代码就能增加系统的功能，而不是通过对现有代码的修

Todo应用实例简介Todo应用从界面上看应该由三部分组成：待办事项的列表；增加新待办事项的输入框和按钮；待办事项过滤器，可以选择过滤不同状态的待办事项。Todo应用代码详解目录结构todos结构详解filter结构详解...

react-redux的两个主要功能connect：连接容器组件和傻瓜组件Provider：提供包含store的contextconnectProviderreact-redux要求store不光是一个object，而且是必须包含三个函数的object□ subscribe□ dispatch□ getStatereact-redux定义了Provider的componentWillReceiveProps函数，在React组件的生命周期中，componentWillReceive

引入查看Counter和Summary组件文件，发现它们都直接导入Redux Store但是组件的位置有可能是无法确定的，那么引入Store.js时候的路径也是无法确定的所以应该在入口文件中导入Store.js，可以让子组件通过props来获取，但是这样如果嵌套太多，就会不方便所以React提供了Context的功能Context是"上下文环境"，让一个树状组件上所有组件都能访问一个共同的对象上级组件要宣称自己支持context，并且提供一个函数来返回代表Context的对象。这个上级组.

定义容器组件：负责和Redux Store打交道的组件，处于外层做涉及状态转换的事情傻瓜组件：专心负责渲染界面的组件，处于内层是纯函数，根据props产生结果代码更改Counter.js区分傻瓜组件和容器组件import React, { Component, PropTypes } from 'react';import store from '../Store.js';import * as Actions from '../Actions.js';const butto

Redux的基本原则Flux的基本原则是单向数据流，Redux在此基础上强调三个基本原则唯一的数据源保持状态只读数据改变只能通过纯函数完成唯一的数据源唯一数据源指的是应用的状态数据应该只存储在唯一的一个Store上。在Redux中，整个应用只保持一个Store，所有组件的数据源就是这个Store上的状态这个唯一Store上的状态，是一个树形的对象，每个组件往往只是用树形对象上一部分的数据保持状态只读不能去直接修改状态，要修改Store的状态，必须要通过派发一个action对象完

简介最重要的观点：单向数据流React是用来替换jQuery的，Flux是替换Backbone.js、Ember.js等MVC一族框架的。以MVC来看，React相当于V（也就是View）的部分，只涉及页面的渲染一旦涉及应用的数据管理部分，还是交给Model和Controller。MVC框架的缺陷内容：用户请求先到达Controller，由Controller调用Model获得数据，然后把数据交给ViewModel（模型）负责管理数据，大部分业务逻辑也应该放在Model中；View（视图