React中的道具与状态的区别

React中的状态和道具有什么区别？

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

状态可以由props来初始化。

例如，一个父级组件可以通过调用以下语句包含一个子级组件

父组件可以通过使用这种语法传递一个道具。

<ChildComponent color=green />

在ChildComponent构造函数里面，我们可以访问这个道具。

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
  }
}

当然，一个组件也可以不看道具就初始化状态。

在这种情况下，没有什么有用的事情发生，但是想象一下，根据道具值做一些不同的事情，可能设置一个状态值是最好的。

道具不应该在子组件中被改变，所以如果有什么事情发生，改变了一些变量，这个变量应该属于组件的状态。

Props也被用来允许子组件访问父组件中定义的方法。这是一个很好的方法，可以集中管理父组件的状态，避免子组件需要拥有自己的状态。

你的大多数组件将只是根据它们收到的道具来显示某种信息，并保持无状态。