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 <div onClick={this.handleClick}>{this.state.count}</div>;
}
});
ReactDOM.render(<Counter initialCount={7}/>, mountNode);
2.父組件向子組件數據傳遞
父組件向子組件的數據傳遞方式一般採用props，但是當一個頁面爲一個組件時，由於展示的數據來源於數據模型，也可能會先將模型中數據加載到父組件的state中，子組件作爲父組件的一個元素，從state中獲取數據，則實現方式與上面的類似了。
但是一般作爲獨立的子組件，最常見的還是採用props的方式。如下：
var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
});
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
需要注意的是在上例中子組件的key必須唯一。
3.子組件向父組件數據傳遞
在ReactJS中由於採用了單向數據流的方式，無論是子組件，還是父組件都可以採用改變數據模型，從而引發組件state中數據的變化，從而改變組件展示方式。但是也存在一些其他情況下，父組件操作、獲取子組件數據的情況。當然子組件也是個對象，最簡單的方式是直接調用子組件對象的方法，對數據進行操作。
4.Context數據傳遞方式
Context是一種較少使用的方式，在早期的版本中有使用，不建議使用了，但是還作爲一種數據傳遞方式的瞭解吧。如下：
var A = React.createClass({
contextTypes: {
name: React.PropTypes.string.isRequired,
},
render: function() {
return <div>My name is: {this.context.name}</div>;
}
});
React.withContext({'name': 'Jonas'}, function () {
// Outputs: "My name is: Jonas"
React.render(<A />, document.body);
});
5.Ref取值方式
ReactJs依然提供Dom的取值方式，也不是直接取值，而是採用ref的方式。
render: function() {
return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
},
或者採用ref直接取值
<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;
6.其他方式
除了以上的方式，我們還可以採用回調函數的方式，將父組件的方法做爲回調函數傳人子組件，進行數據傳遞。
總之，在新老交替的時候，我們往往會出現新瓶裝老醋的情況，用的ReactJs的框架，實現方式還是老的方式，就違背了ReactJs的思想。新的不一定就好，但是在用這個框架的時候儘量還是採用ReactJs推薦的方式吧，等非常熟悉了再去選擇。ReactJs也在不斷變化，不斷改進，其實也是在各種實現方式上的取捨而已，至於哪種好，就交給時間吧。