3

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

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 以外的其他方法，或者告诉我这三个代码片段的区别，我们将不胜感激。

4

2 回答 2

6

将道具置于如下状态：

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

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

所以如果你不改变传入的道具的值，你应该选择第三个。

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

于 2015-05-27T12:36:24.897 回答
2

关于道具和状态的更多信息。道具和状态是相关的。一个组件的状态往往会成为子组件的 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 });
}
于 2015-05-27T13:29:51.467 回答