R假设检验之Jarque-Bera检验(Jarque-Bera Test)

干货!影视剪辑高清视频素材如何下载?大神精选7大影视网站

  返回  

React数据流

2021/7/21 7:51:30 浏览:

单向数据流

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

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号