Question

我想知道直接渲染组件与状态或道具之间的区别。

getInitialState:
    data: this.props.data

以下代码用于渲染功能

1

data = this.state.data
return (<Component data={data} />)

2

return (<Component data={this.state.data} />)

3

return (<Component data={this.props.data} />)

当我在侦听回流动作时使用setState时，前两种情况会崩溃。如果有人建议使用除setState之外的其他内容，或者告诉我这三个代码段的区别将非常受欢迎。

Answer 1

将道具置于这样的状态：

getInitialState: function () {
  return {
    someKey: this.props.someKey
  };
}

是一种反模式，除非您打算稍后修改someKey的值，并将prop用作初始值。

因此，如果你不改变传入的道具的价值，你应该选择三号。

不同之处在于，没有状态的组件可以被认为是“纯粹的”（传入的相同道具每次都提供相同的输出），并且这些组件几乎总是更容易推理。在不改变状态的情况下复制prop状态只会在组件中提供更多代码行，并且可能会让其他人阅读代码时感到困惑。它是一个纯粹的组件伪装成不纯的组件。

Answer 2

关于道具和国家的更多信息。道具和州是相关的。一个组件的状态通常会成为子组件的支柱。作为React.createElement（）的第二个参数，道具将在父项的render方法中传递给子项，或者，如果您使用JSX，则会传递更熟悉的标记属性。

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

childsName的父状态值成为子的this.props.name。从孩子的角度来看，名称prop是不可变的。如果需要更改，父级应该只更改其内部状态：

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

并且React会将它传播给孩子。一个自然的后续问题是：如果孩子需要更改其名称支柱怎么办？这通常通过子事件和父回调来完成。孩子可能会暴露一个名为onNameChanged的事件。然后，父级将通过传递回调处理程序来订阅该事件。

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

孩子会通过调用例如this.props.onNameChanged（＆＃39; New name＆＃39;）来传递它请求的新名称作为事件回调的参数，并且父母将使用事件处理程序中的名称，用于更新其状态。

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