早在一年前，我就很蠢发表过一篇关于React的文章，这篇文章主要根据React官方的介绍初步介绍一下React，并稍微带过一下Webpack，当时只是作为一位iOS开发工程师随便看看React这个东西，现在博主已经励志从一名懂一点Javascript的iOS程序员转变成一位曾经做过iOS的前端开发人员，在自己做过一些React项目之后，想再次介绍一下React这个东西
那么让我们来回顾一下React的基本用法，在某个版本之后React这个库被分为react和react-dom，react负责对组件的操作，react-dom负责将组件渲染到页面上，组件的写法基本为:
var MyComponent = React.createClass({
render: function() {
return React.createElement("div", null);
}
})
使用JSX语法之后
var MyComponent = React.createClass({
render: function() {
return (
<div>
<!-- add some dom code -->
</div>
)
}
})
使用ES6的语法来写:
class MyComponent extends React.Component {
render() {
return (
<div>
<!-- add some dom code -->
</div>
)
}
}
在Babel横行的当今，我是推荐至少要使用JSX的语法来编写React的，这样会使得代码的可读性更强，至于ES6就靠个人洗好了，本文还是推荐使用ES6的语法的，也将使用ES6语法完成大部分代码的示例
随便说说生命周期
关于组件的装载，按照顺序执行下面的方法
constructor，componentWillMount，render，componentDidMount
关于组件的更新，按照顺序执行下面的方法
componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate
关于组件卸载的
componentWillUnmount
英语好的看名字就知道是干嘛的了，真的，应该不用解释了
这里稍微提及一下就是在使用ES6的时候，定义class如下代码：
class A extends React.Component {
custom() {
}
render() {
console.log(this.custom)
return (
<div>
<A customProp="custom"/>
</div>
)
}
}
此处输出this.custom的时候会显示undefined，因为class的非constructor方法都是prototype，可以在this._proto_中访问到，如果想要比较友好的使用this.custom，可以使用auto-bind
React组件核心的两个属性分别叫做props和state，这两个属性其实就是存储了一系列数据，props的数据主要从组件外部传入，比如
class A extends React.Component {
render() {
const {customProp} = this.props
console.log(customProp)
return (
<div></div>
)
}
}
class B extends React.Component {
render() {
return (
<div>
<A customProp="custom"/>
</div>
)
}
}
以上就会输出customProp的值为custom
而state的值则是由组件内部控制的，state应当在constructor的实现中初始化，并在React中调用setState()组件会做diff并刷新相应界面，所以我们能够确定props对于组件内部是静态的，它从外部传入，由外部控制组件。而state是动态的，组件自己控制自己。
了解了以上的知识，基本的React项目已经可以编写了，当然，只要配置好Webpack，关于项目的搭建，之前已经有过一篇文章对其进行过翻译
那么接下来讲讲一些进阶吧
Redux
首先呢，Redux不是只用于React的。当然了React和它很搭，React是一个状态维护组件的界面框架，而Redux恰好是一个非常好的能够维护状态的框架。接下来对Redux做一些介绍，Redux只适用于超大型项目，轻易别用这个东西，很累赘。
那么我们从基础的来看Redux
Action
Action相当于指令，一般会包含两种属性一种是指令类型，用以区分指令，另一种是数据，数据可以有很多，用来处理，当然也可以没有数据单纯发一个指令，这都是可选的，比如以下都是Action：
const OPEN_MOUTH = "OPEN_MOUTH"
const CLOSE_MOUTH = "CLOSE_MOUTH"
const openAction = {
type: OPEN_MOUTH,
size: 10,
time: 5
}
const closeAction = {
type: CLOSE_MOUTH
}
上面一共有两个Action，OPEN_MOUTH、CLOSE_MOUTH分别是两个类型，openAction中的size和time是数据，closeAction中没有数据
Reducer
Reducer是指令的处理器，用于分类处理指令，先上一段代码：
function myReducer(state, action) {
if (action.type == OPEN_MOUTH) {
var newState
//create a new State for open mouth
return newState
} else if (action.type == CLOSE_MOUTH) {
var newState
//create a new State for close mouth
return newState
}
}
这就是一个Reducer，可以看到，这个Reducer接受两个参数，一个是原来的state，一个是action，也就是我们的指令，通过指令的类型和指令的数据来产生新的state就是Reducer的任务。
这里需要注意，Redux开发过程中，在Reducer处理的时候都是期望state纯净的，也就是说，产生的新的state不会修改老的state，所以请巧用Object.assign()，concat()等函数经行操作
Store
可以通过createStore来创建新的store对象，store对象主要的功能是发送Action，和监控整个发送处理过程
let store = createStore(myReducer, {})
store.dispatch(openAction)
createStore第一个参数为Reducer，第二个参数是初始的state值
dispatch方法发送Action
以上就是最简单的Redux的用法，想了想其实就是很简单的东西，如果要我们自己来实现的话我们也可以来演示一遍，主要就是实现一个store
var createStore = (reducer, init) => {
var store = {}
var state = init
var listeners = []
store.dispatch = (action) => {
state = reducer(state, action)
listeners.forEach((listener) => {
listener()
})
}
store.getState = () => {
return state
}
store.subscribe = (listener) => {
let count = listeners.push(listener)
return () => {
listeners.slice(count - 1, 1)
}
}
return store
}
以上就是createStore的大致实现，很简单对不对，所以如果只是想用这个Redux的功能，完全可以用这么点代码代替，不用使用一整个Redux的库，杀鸡焉用牛刀
那么我们来继续介绍一些，Redux还有哪些Api
combineReducers
随着项目越来越复杂，一个Reducer处理的数据就会越来越多，比如针对如下的数据:
{
user: {
name: 'goodname',
sex: 1
},
setting: {
showing: false,
count: 100
}
}
当我们修改user的时候其实setting根本没有被修改，随着同级的属性的增多，把所有的属性的操作都放入一个reducer，代码难免会有一些杂乱，那么我们就会把Reducer拆分，让单个Reducer来处理单个同级属性，combineReducers就帮我们很好的处理了这件事情。比如针对上面的数据，我们之前会这么做
var reducer = (state, action) => {
if (action.type == CHANGE_NAME) {
} else if (action.type == CHANGE_SEX) {
} else if (action.type == SHOWING) {
} else if (action.type == HIDE) {
}
}
同级属性再增多，都会把所有的操作都放在这个函数中，是不好的，有了combineReducers，我们可以这么做:
var user = (state, action) => {
if (action.type == CHANGE_NAME) {
} else if (action.type == CHANGE_SEX) {
}
}
var setting = (state, action) => {
if (action.type == SHOWING) {
} else if (action.type == HIDE) {
}
}
module.exports = combineReducers({user, setting})
这么做就会自动分发属性名对应的Reducer来处理了(当然对应关系可以自己设置)
////未完待续 -> redux-react
