React从零学起

初接触React，除了不习惯其组件化的设计原则外，往往它所‘依赖’的众多module也会让初学者感到困惑，使得不知从何学起。此文只是我对React的一些浅析，希望能帮助想要学习React的朋友入门。

1.React从来就是独立的

正如上面我提到的，React’依赖’了很多module，但是这种依赖并不是所谓的耦合依赖，只是为了更好的去实现React。换句话说，React只是一个View层面的框架，它可以和其他module自然的融合（更好的去实现）。

我们可以只利用React去实现官网上那个Counter的demo，这里我做了一个简易版。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Redux counter example</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

页面只引了一个js文件，该文件为webpack打包而成，具体webpack打包原理不在这里赘述。

MyCounter.js

var React = require('react');

var Counter = React.createClass({
    getInitialState: function() {
        return {value: 0};
    },plus: function() {
        this.setState({
            value: ++this.state.value
        });
    },minus: function() {
        this.setState({
            value: --this.state.value
        });
    },render: function() {
        return (
            <div>
                <button onClick={this.plus}>+</button>
                <span>{this.state.value}</span>
                <button onClick={this.minus}>-</button>
            </div>
        );
    }
});

module.exports = Counter;

这是典型的React的Component，它的内部实现了计数的算法以及state的管理机制，这个Component的实例就是计数器，该计数器也很简单，可以实现增加和减少。

最后是 index.js

var React = require('react');
var ReactDOM = require('react-dom');
var MyCounter = require('./components/MyCounter');

ReactDOM.render(
    <MyCounter />,document.getElementById('root')
);

到此，我们就利用React实现了一个小小的计数器，尽管它很简单，但是却未使用任何其他module，所以我在上面提到，React本身就是独立的。

所以，引用其他module，只是为了实现更复杂的React App，使得其更具有扩展性。

2.Container

那么问题来了，如果我还像要一个类似的Component，但是每次计数的时候不是加1或者减1，而是乘2或除2，那怎么做呢？

你可别告诉我重新一个类似上面MyCounter的Component，然后绑定不同的事件，那如果是这样的话React也太low了吧，这还叫什么组件化呢，组件化最基本的特点就是复用啊。

所以React期望我们这么做：

对于任何Compoent，尽量将其作为静态展示的Component，即其只负责展示UI，然后在它的外层嵌套一个Container， Container中定义了该Compoent所需要的参数以及方法，这样，当我们需要复用Component时，UI已经是现成的了，而Container中的逻辑部分也可以共享，换个“壳子”就是一个具有其他功能的Compoent了。

于是，分解如下：

MyCounterContainer.js

var React = require('react');
var Counter = require('../components/MyCounter');

var CounterContainer = React.createClass({
    getInitialState: function() {
        return {
            value: this.props.value
        };
    },plus: function() {
        this.setState({
            value: this.state.value + 1
        });
    },minus: function() {
        this.setState({
            value: this.state.value - 1
        });
    },render: function() {
        return (
            <Counter plus={this.plus}
                     minus={this.minus}
                     value={this.state.value} />
        );
    }
});

module.exports = CounterContainer;

MyCounter

var React = require('react');

var Counter = React.createClass({
    render: function() {
        return (
            <div>
                <span>{this.props.value}</span>
                <button onClick={this.props.plus}>+</button>
                <button onClick={this.props.minus}>-</button>
            </div>
        );
    }
});

module.exports = Counter;

index.js

var React = require('react');
var ReactDOM = require('react-dom');
var MyCounterContainer = require('./container/MyCounterContainer');

ReactDOM.render(
    <MyCounterContainer value={0} />,document.getElementById('root')
);

UI与逻辑分离成功，是不是感觉瞬间清爽许多。
关于什么时Contianer Component和Presentation Component，推荐此文。

3.Use store to help dispatch actions

分离了UI后，的确逻辑上清楚了许多，但仔细观察会发现，上面的 MyCounterContainer 状态的改变只是两个button。而React认为Component的状态变化必定是由一个行为，即action造成的，因此，我们需要将上面的加减法抽象为一个行为驱动的事件，即一个行为对应一种状态结果。而 redux 就是干这事儿的，它通过createStore去创建一个store，这个store可以管理和知晓这个Component的状态，它通过dispatch分发action然后得到最新的状态结果。

利用store，我们将 MyCounterContainer 重构如下：

var React = require('react');
var Counter = require('../components/MyCounter');
var createStore = require('redux').createStore;


var counter = function(state,action) {
    switch (action.type) {
        case 'PLUS': 
            return state + action.value;
        case 'MINUS': 
            return state - action.value;
        default: 
            return state;
    }
};

var store = createStore(counter,1000);
var CounterContainer = React.createClass({
    plus: function() {
        var nextState = store.dispatch({
            type: "PLUS",value: 2
        });
        this.setState(nextState);
    },minus: function() {
        var nextState = store.dispatch({
            type: "MINUS",render: function() {
        return (
            <Counter plus={this.plus} minus={this.minus} value={store.getState()} /> ); } }); module.exports = CounterContainer;

4.Use connect to manage the dispatch and reducer

仔细观察上次重构，不难发现还是有些问题：

其一，尽管利用store帮我们管理了state，但是还是得我们手动setState，太过耦合。

其二，对于传递给子Component的参数，还是写死在Container里，不具有封装性和灵活性。

为了解决这个问题，我们可以利用 react-redux 的connect来解决。
connect可以把自定义的state和dispatch分发事件绑定到Component上，其中mapStateToProps正如其名，可以将state作为Component的props传递下去；而mapDispatchToProps则可以把action触发逻辑传递下去，这样我们可以很灵活的传递功能事件了。

利用connect我们继续重构，MyCounterContainer 如下：

var React = require('react');
var Counter = require('../components/MyCounter');
var createStore = require('redux').createStore;
var connect = require('react-redux').connect;

var mapStateToProps = function(state) {
    return {
        value: state
    }
};

var mapDispatchToProps = function(dispatch) {
    return {
        plus: function() {
            dispatch({
                type: "PLUS",value: 2
            });
        },minus: function() {
            dispatch({
                type: "MINUS",value: 2
            });
        }
    }
};

var CounterContainer = connect(
    mapStateToProps,mapDispatchToProps
)(Counter);

module.exports = CounterContainer;

5.Split actions

上面的例子已经很接近React的初级App的设计了，但当我们的Component特别复杂时，往往action也会难抽象，像上面的dispatch({type: “PLUS”,value: 2});偶合度太高，因为我们根本不知道这个action为什么是这样，就好比我们随便写了一个常量而并未定义任何变量名一样，别人是很难阅读的。因此比较好的做法是把action更小的分离，比如上面的action，我们可以分离成如下：

module.exports.plusAction = function(val) {
    return {
        type: "PLUS",value: val
    };
}

module.exports.minusAction = function(val) {
    return {
        type: "MINUS",value: val
    };
}

这样，在dispatch时，也会显得很简洁。

6.ES6 refactor

ES6部分就不在这里赘述了，大多都是语法问题，建议大家可以参考阮老师的书ES6入门

7.写在最后

个人认为，学习React十分不推荐一上手就用各种module，或者照猫画虎式的去填空，这样只能是到头来什么也不会。当你从头开始去理解时，才能找到痛点，而当你有痛点时你才需要重构，那么此时可能某个module就是你想要的。你用它只是为了省时，而不是你做不出来才用它。借用我前几天在知乎上回答的问题“用库丢脸不？”，我的观点是：用库不丢脸，不懂库还非要用库才丢脸。原文请戳