reactjs 渲染状态或道具

Posted 2023-02-22

【中文标题】reactjs 渲染状态或道具

【英文标题】：reactjs rendering with state or props

【发布时间】：2015-08-09 12:58:32

【问题描述】：

我想知道直接用 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 的区别，将不胜感激。

【参考方案1】：

将道具置于如下状态：

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

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

所以如果你不改变传入的 prop 的值，你应该使用第三个。

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

【讨论】：

我想编辑道具，因为值已传递给表单。我正在使用回流存储和操作来保存和加载数据。你认为我应该听子元素或父元素的数据变化吗？

【参考方案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 );

【讨论】：

@molderf。如果我在父级加载所有数据，我应该将 changeHandler 传递给所有子级吗？有多个深度的孩子怎么办？

@sean 实际上你不需要将 changeHandler 传递给所有子节点，React 只更新已更改的内容，如果父节点已更改，那么您不需要将处理程序推向下（我的意思是树）。最后我不知道你的应用程序结构，如果你已经正确分离了所有组件，反应更新一切正确

我的意思是有多个孩子，孩子的价值是从父componentDidMount加载的。如果我们将状态存储在父级中，我们应该传递更改处理程序，不是吗？