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 回答