理解react中的props和state

港控/mmm° 2022-05-25 12:24 334阅读 0赞

Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。

State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合；

**props：**

**1、props意为属性，只可父组件改变子组件的props，而子组件不能自更新。（组件内部的this.props属性是只读的，不能修改）**

**2、props是子组件暴露给外部的公有接口。**

**3、props是一个父组件传递给子组件的数据流，可以一直的被传递到子孙组件中。（  props是React在整个组件树中传递数据用的）**

看个小例子：

父组件：App.js

import Item from "./item";
    export default class App extends React.Component{
      render(){
        return (
         <Item name="leo" age=18>    )
      }
    }

Item组件：

export default class Item extends React.Component{
      render(){
        return (
          <p>{`名字：${this.props.name}`}</p>
          <p>{`年龄：${this.props.age}`}</p>
        )
      }
    }

如果想要修改Item组件中的name和age，不能通过this.props.name="donna"这种形式，只能通过修改修改App.js中的name和age进而修改Item中的name和age，当然怎么修改就要靠state啦，下面我们聊聊state

**state**

state意为状态，所谓的状态就是一种标记，设计用来控制某种逻辑，全局的私有变量，外部不能访问，state的改变会被render()函数自动捕捉到，当然state改变后是否执行render，还取决于bool shouldComponentUpdate(nextProps, nextState) 返回false则不会重新渲染。

**1、state是组件内部的状态，只能通过setState来改变，用来更新组件内部的数据**

this.setState({items: data});//items为刚开始定义的state变量，data为要赋给items的值

如果items的值也为items，那么可以写成

this.setState({items});//和this.setState({items:items})等价

**2、 State 的更新是异步的。**

调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State，计算下个State。当真正执行状态修改时，依赖的this.state并不能保证是最新的State，因为React会把多次State的修改合并成一次，这时，this.state将还是这几次State修改前的State。  
**3、State 的更新是一个浅合并（Shallow Merge）的过程。**

当调用setState修改组件状态时，只需要传入发生改变的State，而不是组件完整的State，因为组件State的更新是一个浅合并（Shallow Merge）的过程.。

看下面的例子

this.state = {
      name: 'donna',
      age: 18
    }
    //当只需要修改状态name时，只需要将修改后的name传给setState：
    
    this.setState({name: 'leo'});
    //React会合并新的name到原来的组件状态中，同时保留原有的状态age，合并后的State为：
    
    {
      name: 'leo',
      age: 18
    }

总结：

props：一般用于父组件向子组件通信，在组件之间通信使用。

state：一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。