React 之单向数据流

React 中父子组件间属性的传递与操作是比较常见的，刚入门React 的小伙伴可能遇到过这样的问题：
1 子组件无法直接操作父组件的属性
2 子组件无法直接向父组件传递属性值
那么该如何解决此类问题呢？
答案是将父组件的方法以属性的形式传递给子组件，进而操作父组件的属性。
接下来用一个demo演示。
拷贝代码注意删除封号.

> `import React from 'react';
import Son from './Son';
class Father extends React.Component {
    state = {
       num : 1 
     } 
    render() { 
        return (
            <div>
                <Son num = {this.state.num}/>
            </div>
        );
    }
}
export default Father

效果

接下来通过子类调用父类方法修改父类属性。
首先在父组件创建修改属性的方法，并将它传递给子组件，注意绑定好this。
修改后代码如下：

import React from 'react';
import Son from './Son';
class Father extends React.Component {
    state = {
       num : 1 
     } 
     constructor(props){
         super(props)
         this.updateNum = this.updateNum.bind(this)
     }
    render() { 
        return (
            <div>
                <Son num = {this.state.num} updateNum = {this.updateNum}/>
            </div>
        );
    }
    updateNum(newNum){
        this.setState({
            num:newNum
        })
    }
}
export default Father;

子组件代码如下：

import React from 'react';
class Son extends React.Component {
    state = { 
        a : 1 
     } 
    constructor(props){
        super(props)
        
    }
    render() { 
        return (
           <div>
               {this.props.num}
               <button onClick={this.changeNum.bind(this)}>Update</button>
           </div>
        );
    }
    changeNum(){
        this.setState({
            a : this.state.a+1
        })
        this.props.updateNum(this.state.a)
    }
}
 
export default Son;

效果图：