道具与状态在React中

React中的state和props有什么区别?

在React组件中,道具是由其父组件传递给它的变量。状态另一方面,它仍然是变量,但直接由组件初始化和管理。

状态可以通过props初始化。

例如,父组件可以通过调用来包括子组件

<ChildComponent />

父母可以使用以下语法传递道具:

<ChildComponent color=green />

在ChildComponent构造函数中,我们可以访问prop:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

并且此类中的任何其他方法都可以使用this.props

道具可用于基于构造函数中的道具值设置内部状态,如下所示:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

当然,组件也可以在不查看道具的情况下初始化状态。

在这种情况下,没有任何用处,但可以想象根据prop值做一些不同的事情,最好设置一个状态值。

子组件中的道具永远都不应更改,因此,如果发生某些事情改变了某些变量,则该变量应属于组件状态。

道具还用于允许子组件访问父组件中定义的方法。这是在父组件中集中管理状态的一种好方法,可以避免子级需要拥有自己的状态。

您的大多数组件只会根据收到的道具显示一些信息,并留下来无状态的

免费下载我的反应手册


更多反应教程: