再探React

早在一年前，我就很蠢发表过一篇关于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