一、React的单向数据流
React是单向数据流，数据主要从父节点传递到子节点（通过props）。
如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。这通常被称为“自顶向下”或“单向”数据流。任何状态始终由某个特定组件所有，并且从该状态导出的任何数据或UI只能影响树中“下方”的组件。
二、React的组件间通信
1）父级-》子级
比较简单，直接调用时设置props值
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>菜鸟教程 React 实例</title> 6 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 8 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 9 </head> 10 <body> 11 <div id="example"></div> 12 <script type="text/babel"> 13 var WebSite = React.createClass({ 14 getInitialState: function() { 15 return { 16 name: "菜鸟教程", 17 site: "http://www.runoob.com" 18 }; 19 }, 20 21 render: function() { 22 return ( 23 <div> 24 <Name name={this.state.name} /> 25 <Link site={this.state.site} /> 26 </div> 27 ); 28 } 29 }); 30 31 var Name = React.createClass({ 32 render: function() { 33 return ( 34 <h1>{this.props.name}</h1> 35 ); 36 } 37 }); 38 39 var Link = React.createClass({ 40 render: function() { 41 return ( 42 <a href={this.props.site}> 43 {this.props.site} 44 </a> 45 ); 46 } 47 }); 48 49 ReactDOM.render( 50 <WebSite />, 51 document.getElementById('example') 52 ); 53 </script> 54 </body> 55 </html>
2）子级-》父级
用回调函数，传参
1 class Father extends React.Component{ 2 constructor(props){ 3 super(props); 4 this.state={ 5 inputValue:"" 6 } 7 } 8 //在回调函数里处理子级的输入 9 handleInputChange(e){ 10 this.setState({ 11 inputValue:e.target.value 12 }); 13 } 14 render(){ 15 return ( 16 <div> 17 <span>输入为{this.state.inputValue}</span> 18 <Child onChange={this.handleInput2Change.bind(this)} /> 19 </div> 20 ); 21 } 22 } 23 //通过onChange={this.props.onChange}，子级输入事件发生时，调用的是父级传入的回调函数 24 class Child extends React.Component{ 25 render(){ 26 return ( 27 <div> 28 <input value={this.props.value} onChange={this.props.onChange}/> 29 </div> 30 ); 31 } 32 } 33 ReactDOM.render( 34 <Father />, 35 document.getElementById('root') 36 );
3）兄弟《-》兄弟：
按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。
下面实现一个组件通信的例子，一个输入框的数据改变，另一个输入框数据会跟随同时改变。
1 class Form1 extends React.Component{ 2 constructor(props){ 3 super(props); 4 this.state={ 5 input1Value:"", 6 input2Value:"" 7 } 8 } 9 handleInput1Change(e){ 10 const input1=e.target.value; 11 let input2=input1-1; 12 this.setState({ 13 input1Value:input1, 14 input2Value:input2 15 }); 16 } 17 handleInput2Change(e){ 18 const input2=e.target.value; 19 let input1=input2-0 + 1; 20 this.setState({ 21 input1Value:input1, 22 input2Value:input2 23 }); 24 } 25 render(){ 26 return ( 27 <div> 28 输入框1： 29 <Input1 value={this.state.input1Value} onChange={this.handleInput1Change.bind(this)} /> 30 输入框2： 31 <Input2 value={this.state.input2Value} onChange={this.handleInput2Change.bind(this)} /> 32 </div> 33 ); 34 } 35 } 36 class Input1 extends React.Component{ 37 render(){ 38 return ( 39 <div> 40 <input value={this.props.value} onChange={this.props.onChange}/> 41 </div> 42 ); 43 } 44 } 45 class Input2 extends React.Component{ 46 render(){ 47 return ( 48 <div> 49 <input value={this.props.value} onChange={this.props.onChange}/> 50 </div> 51 ); 52 } 53 } 54 ReactDOM.render( 55 <Form1 />, 56 document.getElementById('root') 57 );
