React中数据传递三兄弟(state、props、context)

                    React中跟数据有关的三样东西:state、props、context。(数据传递三兄弟)

一、state

React把组件看成是一种状态机,通过与用户的交互实现不同状态然后渲染UI,让用户界面与数据保持一致。只

需要更新组件的state,然后根据新的state重新渲染用户界面(不要操作DOM)。

     1.定义state:在构造函数中使用this.state

     2.使用state:在JSX中{this.state.xxx}

     3.改变state:如 this.setState({this.state.xxx+1})

state是内部的,只有组件自己才能改变自己的state,别人不能变自己的state。对于Redux架构,组件自己的state很少用了,而是变为了Redux的state

二、props

props是定义在自定义组件标签上面的值,当props改变,会引发VirtualDOM改变,从而引发视图的重绘。state与props的区别是:props是不可变的,而state可根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据, 而子组件只能通过 props 来传递数据。

      1.以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 设置 name 和 site 来获取父组件传递过来的数据

       2.子控件需要父控件所有的props参数,一个个参数的写会很麻烦:<Name name={this.props.name} url={this.props.url} .../>

解决方法:把父属性直接赋值给子组件的props参数,如下写法即可:<Name props={this.props}/>

      3.在子组件中,props是只读的,不能修改props的值,如果要修改,可以用state来接收。    如果非要从下向上传数据?子组件要把数据返回给父组件,也就是父组件传一个函数给子组件,子组件通过传参数调用函数将数据返回给父组件的函数,父组件的函数接受实参来改变父组件中的state等值

三、总结

如果一个组件需要在某个时间点改变某个属性,那该属性应设为state,否则应设为组件的prop。

       props是一个组件的 配置选项props是由上到下指定且不可改变的。一个组件不能改变自身的props, 但要负责设置子组件的 props

      当组件加载时,state有一个默认值,后来state会不定期地改变(主要是用户行为触发的)。state是每一时间点组件状态的代表-快照

(1)props和state共同点:

  • props和state都是 纯 JS 对象
  • props和state的改变都会触发render函数来更新界面
  • props和state都是确定的。 如果组件在相同的props和state的组合下产生不同结果,那一定是哪里错了

(2)哪些组件应该有state

无状态组件 — 只有 props    有状态组件 — 既有 props 又有 state。也被称作状态管理者

常用的模式是创建多个只负责渲染数据的无状态(stateless)组件,在它们的上层创建一个有状态(stateful)组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑,而这些无状态组件则负责声明式地渲染数据

(3)哪些应该作为 state?

      State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。当创建一个状态化的组件时,想象一下表示它的状态最少需要哪些数据,并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据

(4) 哪些不应该作为 state?

     this.state 应该仅包括能表示用户界面状态所需的最少数据,不包括:计算所得数据、React 组件、基于 props 的重复数据

猜你喜欢

转载自blog.csdn.net/RuiKe1400360107/article/details/82967800