React组件从props初始化状态

作者: 哈哈哈哈
发布时间: 2024-06-03 12:42:15 (1月前)
转自：

6 条回复

0#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> 如果您直接通过道具启动状态，它将在React 16.5（2018年9月5日）中显示警告 </p> </BLOCKQUOTE> </DIV>

编辑
1#
回复此人
哇塞 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果要将所有道具添加到状态并保留相同的名称，可以使用如下所示的简短形式。 </p> <pre> <code> constructor(props) { super(props); this.state = { ...props } //... } </code> </pre> </DIV>

编辑
2#
回复此人
庸人自扰1 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以用 <code> key </code> 在需要时重置状态的值，传递道具以表明它不是一个好习惯，因为你在一个地方有不受控制和控制的组件。数据应该在一个地方处理读这个 <a href =“https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key”rel =“nofollow noreferrer”> https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key </A> </p> </DIV>

编辑
3#
回复此人
句号了哦哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 更新React 16.3 </强> alpha介绍 <code> static getDerivedStateFromProps(nextProps, prevState) </code> （ <a href="https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops" rel="noreferrer"> 文档 </A> ）作为替代品 <code> componentWillReceiveProps </code> 。 </p> <BLOCKQUOTE> <P> 在实例化组件之后以及在接收新的props时调用getDerivedStateFromProps。它应该返回一个更新状态的对象，或者返回null以指示新的props不需要任何状态更新。 </p> <P> 请注意，如果父组件导致组件重新渲染，即使props没有更改，也会调用此方法。如果您只想处理更改，则可能需要比较新值和以前的值。 </p> </BLOCKQUOTE> <P> <a href="https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops" rel="noreferrer"> https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops </A> </p> <P> 它是静态的，因此它没有直接访问权限 <code> this </code> （但它确实可以访问 <code> prevState </code> ，可以存储通常所附的东西 <code> this </code> 例如 <code> refs </code> ） </p> <P> <EM> 编辑以反映@ nerfologist在评论中的更正 </EM> </p> </DIV>

编辑
4#
回复此人
My☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你不需要打电话 <code> setState </code> 在一个组件中 <code> constructor </code> - 这是设置的惯用语 <code> this.state </code> 直： </p> <pre> <code> class FirstComponent extends React.Component { constructor(props) { super(props); this.state = { x: props.initialX }; } // ... } </code> </pre> <P> 看到 <a href="https://facebook.github.io/react/docs/state-and-lifecycle.html#adding-local-state-to-a-class" rel="noreferrer"> 反应文档 - 向类添加本地状态 </A> 。 </p> <P> 您描述的第一种方法没有任何优势。在第一次安装组件之前，它将立即进行第二次更新。 </p> </DIV>

编辑

登录后才能参与评论