我想知道直接用 state 或 props 渲染组件的区别。
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 以外的其他方法或告诉我这三个代码 sn-ps 的区别，将不胜感激。
【问题讨论】：
将道具置于如下状态：
getInitialState: function () {
return {
someKey: this.props.someKey
};
}
是一种反模式，除非您打算稍后修改 someKey 的值，并且您将 prop 用作初始值。
所以如果你不改变传入的 prop 的值，你应该使用第三个。
不同之处在于，没有状态的组件可以被认为是“纯”的（传入的相同道具每次都会给出相同的输出）并且这些组件几乎总是更容易推理。在不改变状态的情况下复制 state 中的 prop 只会在组件中增加更多代码行，并且可能会使其他阅读代码的人感到困惑。是伪装成不纯成分的纯成分。
【讨论】：
更多关于道具和状态的信息。道具和状态是相关的。一个组件的状态往往会成为子组件的 props。 props 在父级的 render 方法中作为 React.createElement() 的第二个参数传递给子级，或者，如果您使用的是 JSX，则可以使用更熟悉的标记属性。
<MyChild name={this.state.childsName} />
childsName 的 parent 的 state 值变成了 child 的 this.props.name。从孩子的角度来看，名称道具是不可变的。如果需要更改，则父级应更改其内部状态：
this.setState({ childsName: 'New name' });
React 会为你将它传播给孩子。一个自然的后续问题是：如果孩子需要更改其名称道具怎么办？这通常通过子事件和父回调来完成。孩子可能会公开一个名为 onNameChanged 的事件。然后，父级将通过传递回调处理程序来订阅该事件。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
子进程会通过调用 this.props.onNameChanged('New name') 将其请求的新名称作为参数传递给事件回调，而父进程将使用事件处理程序中的名称来更新其状态.
handleName: function(newName) {
this.setState({ childsName: newName });
}
【讨论】：