javascript - React中的state和props有什么区别？(What is the difference between state and props in React?)

Question

I was watching a Pluralsight course on React and the instructor stated that props should not be changed.(我正在观看有关React的Pluralsight课程，并且讲师说不应更改道具。)

I'm now reading an article (uberVU/react-guide) on props vs. state and it says(我现在正在阅读有关道具与状态的文章（uberVU / react-guide） ，它说)

Both props and state changes trigger a render update.(道具和状态更改都会触发渲染更新。)

Later in the article it says:(文章稍后会说：)

Props (short for properties) are a Component's configuration, its options if you may.(道具（属性的缩写）是组件的配置，如果可以的话，它是选项。)

They are received from above and immutable.(它们是从上方接收的，并且是不变的。)

• So props can change but they should be immutable?(所以道具可以改变，但它们应该是不变的？)
• When should you use props and when should you use state?(什么时候应该使用道具，什么时候应该使用状态？)
• If you have data that a React component needs, should it be passed through props or setup in the React component via getInitialState ?(如果您有React组件需要的数据，是否应该通过prop或通过getInitialState在React组件中进行设置来传递数据？)

  ask by skaterdav85 translate from so

Answer 1

Props and state are related.(道具和状态有关。)

The state of one component will often become the props of a child component.(一个组件的状态通常会成为子组件的道具。) Props are passed to the child within the render method of the parent as the second argument to React.createElement() or, if you're using JSX, the more familiar tag attributes.(道具作为React.createElement()的第二个参数传递给父对象的render方法中的子对象，或者，如果您使用的是JSX，则将其作为更熟悉的标签属性。)

<MyChild name={this.state.childsName} />

The parent's state value of childsName becomes the child's this.props.name .(父级的childsName状态值成为子级的this.props.name 。)

From the child's perspective, the name prop is immutable.(从孩子的角度来看，prop这个名字是一成不变的。) If it needs to be changed, the parent should just change its internal state:(如果需要更改，则父级只需更改其内部状态即可：)

this.setState({ childsName: 'New name' });

and React will propagate it to the child for you.(React将为您将其传播给孩子。)

A natural follow-on question is: what if the child needs to change its name prop?(接natural而来的自然问题是：如果孩子需要更改道具名称该怎么办？) This is usually done through child events and parent callbacks.(这通常是通过子事件和父回调完成的。) The child might expose an event called, for example, onNameChanged .(子级可能会公开一个事件，例如onNameChanged 。) The parent would then subscribe to the event by passing a callback handler.(然后，父级将通过传递回调处理程序来订阅事件。)

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

The child would pass its requested new name as an argument to the event callback by calling, eg, this.props.onNameChanged('New name') , and the parent would use the name in the event handler to update its state.(子级将通过调用例如this.props.onNameChanged('New name')来将其请求的新名称作为参数传递给事件回调，而父级将在事件处理程序中使用该名称来更新其状态。)

handleName: function(newName) {
   this.setState({ childsName: newName });
}