react中父组件与子组件间的通信

前言

相信很多刚开始接触react的朋友都没能完全的弄明白react父子组件间是如何进行行云流水班的数据通信，这其中的底层机制又是什么，相信通过此篇文章能够立竿见影的解答大家心中的疑惑。

父组件向子组件传递数据

在日常使用中父组件向子组件传递数据有两种方式：
父组件的参数作为子组件的props，子组件使用connect获取数据

父组件的参数作为子组件的props

在父组件调用子组件时，可以将父组件的某个属性值当成参数传递给子组件，并且在子组件中此属性值以props的形式获得。
例如下面这个实例代码片段：

this.onValue1Change(value)} />

父组件给子组件InputValue传递了两个参数value和onChange，那么子组件的props里就含有这两个属性。

子组件使用connect获取数据

这种方式是需要结合redux框架，因为connect函数就是位于其函数库。
子组件通过connect获取到的数据也是作为其props进行使用，与上一种方式不同的地方在于这种方式的父组件不能够直接将数据通过参数的方式传给子组件，所以才需要子组件使用connect函数进行获取。

子组件向父组件传递数据

很多时候，我们不仅仅需要在子组件中获得到父组件的数据，而且也需要父组件能够得到子组件的相应数据。react本身只支持单向的数据传送，但是这依然不妨碍我们能够逆向传递数据，因为在JavaScript中有一种函数叫做回调函数，（callback function）通过它我们就能在父组件中获取到子组件的返回数据。
操作流程：我们可以把父组件的回调函数当成参数传递给子组件，然后将子组件的数据作为回调函数的参数传递给父组件，那么父组件就能顺利拿到子组件的返回数据。

一个简单且很形象的案例

上面讲述了那么多肯定有很多朋友觉得很抽象，没有实操案例，最终还是一种似懂非懂的感觉。
官方文档有关这个板块的内容章节叫做状态提升，但是里面那个案例稍稍有些复杂，下面我使用一个最简单的加法算数器为案例来详细的讲解父子组件间的数据传递。
最终效果图：

两个输出框可以输入数值，并且最后的结果会随着输入值的改变而进行实时性的相应改变。

父组件解析

首先，我们需要建立父组件即容器组件，这个容器组件包含三个模块五个元素，三个模块分别是两输入框的子组件、加号和等号两个元素以及最后的结果显示的子组件。
对于父组件而言，它的state很明显有三个，分别是两个输入框的值以及最后的结果值，并且我们还需要为两个输入框分别都设置一个相对于的回调函数的处理函数用于及时更新state的变化，从而重新render页面。
ok, show you the code:

class Container extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value1: 1,
            value2: 1,
            result: 2,
        };
    }

    onValue1Change(value) {
        this.setState({
            value1: value,
            result: Number(value) + Number(this.state.value2),
        });
    }

    onValue2Change(value) {
        this.setState({
            value2: value,
            result:  Number(value) + Number(this.state.value1),
        });
    }
    render() {

        return (
            

                this.onValue1Change(value)} />
                +
                this.onValue2Change(value)} />
                =
                
            
        );
    }
}

子组件解析

接下来，我们来看看输入框子组件的内容。
首先，由于父组件给它传递了两个参数value和onChange，所以其props里含有这个两属性，value是用于显示在其input输入框里的值，而回调函数onChange是用于相应input的onChange事件并且把改变后的值作为回调函数的参数丢给父组件进行让父组件进行相应的逻辑处理。
ok, show you the code:

class InputValue extends React.Component {
    constructor(props) {
        super(props);
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }

    render() {
        return (
            this.handleChange(e)} />
        );
    }
}

至于最后的一个Result子组件，其功能非常简单单一，我这里直接使用函数组件，直接上代码：

function Result(props) {
    return (
        {props.value}
    );
}

小结

到此，这个案例的功能就全部完成了。最后，我再把完整父子组件的数据传递流程给大家串一遍：
当用户改变输入框的值后，触发input的onChange方法，在其处理函数中将更新后的值作为回调函数的参数并运行此回调函数，在父组件的回调函数中接收到更新后的来自子组件的数据，通过setSate方法更新父组件的state，由于state改变父组件需要重新render，在新的render中，父组件将新的value值传递给子组件，最后子组件的props得到新的value值并重新渲染到页面上。

结语

俗话说得好，百闻不如一练，最后我把此案例的完整代码以及一个可以先上运行此代码的地址都发给大家，毕竟不排除可能还有些朋友都不会搭建react的框架环境。
可运行的完整代码：

在线运行网址：https://www.w3cschool.cn/tryrun/showhtml/try_react_hw