React实战-模块化条件下的6种数据传递方式
React实战-模块化条件下的6种数据传递方式
当前新的前段框架中最突出就是模块化，然后模块化后，数据的传递方式与之前的方式也不尽相同，尤其是框架各自定义的方式也不一样。规则这东西归根到底是个度的问题，没有规则，就会混乱，规则多了，就死板。所以规则多少是个很难把握的东西（微信：react-javascript）。
刚开始接触ReactJS的时候，你会觉得很别扭，一些取值、赋值的方式将违背你的习惯。还是那句话：当你在通过Dom直接取值、赋值的时候，你可能就错了。这不仅仅是我们，就连ReactJS生态圈里有名的控件库Material-UI在版本演变过程中也在不断的调整编程方式，早期版本中DropDownList也有selectItemValue，selectItemIndex，慢慢逐步被ReactJs的单一数据流方式取代，界面控件的变化一般不采用直接赋值，而是一般依据绑定数据的变化引起界面展示变化。
在ReactJs中组件间数据传递不仅有父组件向子组件数据传递，子组件向父组件数据传递，组件内部数据传递的三种基本方式，也有在不断演进中的其他方式。
1.组件内部数据传递
ReactJs组件可大可小，大的组件可以是多个组件的集合，也可能是一个元素，也可能是一个页面。但只要被定义为一个组件，内部数据改变，都通过state进行传递。
State的方式也是实现了组件内部数据的封装，排除了外来数据干扰。props则负责接收外部数据。所有state和props也就成了ReactJS组件需要重点关注的东西，在ReactJs组件的生命周期的事件基本上都是关于state和props的。state数据的变化也就引起组件的render。
组件mounting的调用的顺序依次是:getDefaultProps,getInitialState,componentWillMount,render,componentDidMount.
组件unmounting的调用的是componentWillUnmount.
组件Updating(re-render)的调用的顺序依次是componentWillReceiveProps，shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.
在组件内部操作数据时：
a.组件展示数据来源于state；
b.数据变化采用的方式是由事件触发state数据的变化，由state数据变化导致组件re-render。如下：
var Counter = React.createClass({
getInitialState: function() {
return {count: 4};
},
handleClick: function() {
this.setState({count: this.state.count + 1});
},
render: function() {
return
}
});
ReactDOM.render(
2.父组件向子组件数据传递
父组件向子组件的数据传递方式一般采用props，但是当一个页面为一个组件时，由于展示的数据来源于数据模型，也可能会先将模型中数据加载到父组件的state中，子组件作为父组件的一个元素，从state中获取数据，则实现方式与上面的类似了。
但是一般作为独立的子组件，最常见的还是采用props的方式。如下：
var ProductCategoryRow = React.createClass({
render: function() {
return (
}
});
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
rows.push(
}
});
return (
| Name | Price |
|---|
);
}
});
需要注意的是在上例中子组件的key必须唯一。
3.子组件向父组件数据传递
在ReactJS中由于采用了单向数据流的方式，无论是子组件，还是父组件都可以采用改变数据模型，从而引发组件state中数据的变化，从而改变组件展示方式。但是也存在一些其他情况下，父组件操作、获取子组件数据的情况。当然子组件也是个对象，最简单的方式是直接调用子组件对象的方法，对数据进行操作。
4.Context数据传递方式
Context是一种较少使用的方式，在早期的版本中有使用，不建议使用了，但是还作为一种数据传递方式的了解吧。如下：
var A = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired,
},
render: function() {
return
}
});
React.withContext({'name': 'Jonas'}, function () {
// Outputs: "My name is: Jonas"
React.render(, document.body);
});
5.Ref取值方式
ReactJs依然提供Dom的取值方式，也不是直接取值，而是采用ref的方式。
render: function() {
return
},
componentDidMount: function() {
this._input.focus();
},
或者采用ref直接取值
var input = this.refs.myInput;
var inputValue = input.value;
6.其他方式
除了以上的方式，我们还可以采用回调函数的方式，将父组件的方法做为回调函数传人子组件，进行数据传递。
总之，在新老交替的时候，我们往往会出现新瓶装老醋的情况，用的ReactJs的框架，实现方式还是老的方式，就违背了ReactJs的思想。新的不一定就好，但是在用这个框架的时候尽量还是采用ReactJs推荐的方式吧，等非常熟悉了再去选择。ReactJs也在不断变化，不断改进，其实也是在各种实现方式上的取舍而已，至于哪种好，就交给时间吧。