Fatal编程技术网
  • javascript/
  • Javascript 如何在不使用componentWillReceiveProps的情况下处理道具更改

Javascript 如何在不使用componentWillReceiveProps的情况下处理道具更改

javascript reactjs redux

Javascript 如何在不使用componentWillReceiveProps的情况下处理道具更改,javascript,reactjs,redux,state,Javascript,Reactjs,Redux,State,我一直在做一个用React编码的项目。我有一个组件集，我为自己的需求实现了许多组件。其中许多类似于复合组件。例如，TextBox组件，它有自己的标签、自己的错误消息机制和自己的输入过滤器等。此外，你知道，组件有管理某事物的道具 每次更新我的组件视图（渲染）时，我都会使用componentWillReceiveProps并比较props的更改 但是每次实现组件willreceiveprops方法都非常讨厌 有没有办法不使用组件从上到下传递道具WillReceiveProps。我不想手动比较道具的变

我一直在做一个用React编码的项目。我有一个组件集，我为自己的需求实现了许多组件。其中许多类似于复合组件。例如，TextBox组件，它有自己的标签、自己的错误消息机制和自己的输入过滤器等。此外，你知道，组件有管理某事物的道具

每次更新我的组件视图（渲染）时，我都会使用
componentWillReceiveProps
并比较props的更改

但是每次实现
组件willreceiveprops
方法都非常讨厌

有没有办法不使用
组件从上到下传递道具WillReceiveProps
。我不想手动比较道具的变化。有什么方法可以自动完成吗

当我在父视图中更改道具时，我想更新所有视图，只是从上到下更改一些道具值

我不是react专家，性能也不是我的首要目标

还有一件事，答案不是
使用Redux

我在等待你的创造性方法和有用的想法。

这里没有什么建议：

  • 不要将道具复制到
    组件WillReceiveProps
    中的状态-只需直接从
    此中渲染。道具
  • 如果您的组件需要性能调整（并且只有在性能出现问题时才需要调整）：
    • 从使用
      shouldComponentUpdate
      的一般形式开始，就像这里建议的那样
    • 如果通用方法不适合您，请编写自定义代码
一般来说，开发类似文本框的组件的方法是使其保持无状态。组件直接呈现道具，并将更改通知父组件，而不关心值的管理

希望这将有助于

在没有看到您正在处理的特定事情的代码的情况下，我可能会遗漏一些您正在做的事情

正如其他人所评论的，如果提供了新的道具，React将重新呈现组件，无论您是否实现
componentWillReceiveProps
——实现它的唯一原因是进行某种特定的比较或基于新道具值设置状态

从React文档（我的重点）：

componentWillReceiveProps（）在装入的组件接收新的道具之前被调用如果需要更新状态以响应道具更改（例如，重置道具），可以比较this.props和nextProps，并在此方法中使用this.setState（）执行状态转换。

请注意，即使道具没有更改，React也可能调用此方法，因此如果您只想处理更改，请确保比较当前值和下一个值。当父组件导致组件重新渲染时，可能会发生这种情况

换句话说，如果您有如下组件：

在内部将道具更改传递给两个子组件，如：

class TextBox extends React.Component {
  
  render() {
    return (
      <div className={'text-box'}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }
  
}
如果您试图防止在对性能没有必要的情况下重新渲染，请按照Andrey的建议执行，并使用
shouldComponentUpdate
：

TLDR；除非您是从道具设置组件状态，否则可能不需要通过
componentWillReceiveProps运行新道具


2018年2月更新：在未来的版本中，React将弃用
组件将接收Props
，支持新的
getDerivedStateFromProps
，这里的更多信息：
 < P>请考虑DeFulter实现的 PureReals，该代码使用 SubDeCudioUptudio< <代码> >其中，浅层相等用于前面和下一个
之间的比较。
请尝试以下代码：


class MyComponent扩展了PureComponent{…}
问题不清楚-如果您想对更新的道具（可能）做出特定的响应，您只需要实现
componentWillReceiveProps
。当我在父容器中更改道具时，我想从上到下更新所有视图。您不需要实现组件WillReceiveProps以使组件具有反应性。我不明白你的问题？@Tugrul-传播是由React自己处理的。我要再次检查我的组件。正如你所说，我期待着，但有些奇怪的事情，它不是那样工作的。

class TextBox extends React.Component {
  
  componentWillReceiveProps(nextProps) {
    if (this.props.content !== nextProps.content) {
      this.setState({changed: true});
    }
  }

  render() {
    
    const changed = this.state.changed ? 'changed' : 'unchanged';

    return (
      <div className={`text-box ${changed}`}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }
  
}