React数据流

单向数据流

        React是单向数据流的js框架，即数据只会朝一个方向流动，由父组件到子组件进行传递和更新。

        React的核心思想就是UI = Render(data)，data就是数据，Render()是React提供的纯函数，所以用户界面的展示完全取决于数据。

        这里说一下数据和状态的概念：

        状态： React是利用可复用的组件来构建界面，组件本质上是一个有限状态机，它能够记住当前所处的状态，并且能够根据不同的状态变化做出相应的操作。在React中，把这种状态定义为state，用来描述该组件对应的当前交互界面，表示当前界面展示的一种状况，React正是通过管理状态来实现对组件的管理。当state变化时，React会自动执行操作：绘制界面。

        数据：数据比较广泛，不只包括后端返回给前端的数据，React的状态也是一种数据。

React自身的数据流管理方案：

        React是自上而下的单向数据流，容器组件&展示组件是最常用的组件设计方案。容器组件负责处理复杂的业务逻辑和数据，展示组件负责处理UI层。通常我们会将展示组件抽出来进行封装和复用。容器组件自身通过state来管理状态，setState更新状态，从而更新UI，将自身的状态通过props传递给展示组件实现通信。

组件的简单化实现

        类组件的本质，是类。类的本质，是函数。函数组件的本质，也是函数。也就是说，组件的本质，是函数。

        那么组件嵌套组件实例的方式，其实就是函数嵌套函数实例化对象。运行下面代码：

        function child(props) {
            this.props = props
        }

        function parent(props) {
            this.props = props

            this.state = '我是父函数的一个状态'
            this.childNodes = new child(this.state)
        }

        console.log('=======', new parent('传给父函数的属性'))

这就是简单的通过props实现单向数据流。

对比一下React组件代码：

      class Child extends react.Component {
            state = {
                ...this.props
            }

            render() {
                return (
                    <div>我是子组件</div>
                )
            }
        }

        class Father extends react.Component {
            state = {
                data: '我是父组件状态'
            }

            render() {
                return (
                    <Child data={this.state.data}></Child>
                )
            }
        }

是不是很想，因为组件的本质是函数。

为什么是单向数据流

        单向数据流最大的好处是所有状态改变可溯源。

        组件就是函数，props就是函数的传参。假如组件内部可以随意改变父组件甚至祖宗组件的状态，相当于在函数内部改变了入参，那么这个函数就产生了副作用，这会使函数变的不可测试，不可预测执行结果，不可维护。单向数据流就保证了父组件状态不会被子组件修改。