一旦构建了 React 项目，props 会发生什么？答案

【问题标题】：What happens to props once a React project is built?一旦构建了 React 项目，props 会发生什么？
【发布时间】：2020-03-10 16:58:51
【问题描述】：

我正在使用 React 构建一个项目，并且遇到了一个我不知道如何解决的问题，因为它在概念上超出了我的能力范围。

在我的项目中，我将 JavaScript Date 对象作为道具传递给组件。
然后我将这些数据作为状态存储在组件中。
然后使用该日期状态来更新时间线栏，这显然需要是当前的时间线才能进行。

代码的简化版本如下：

日期组件文件：

class DateComponent extends Component{
  constructor(props){
    super(props);
    this.state = {
      start: new Date(this.props.start)
    }

  render() {
    return (
      <div data-custom-attr={this.state.start}></div>
    )
  }
}

传递道具：

<DateComponent
  start={new Date()}
/>

在我完成的项目中，我将渲染一些 HTML，如下所示：

<div data-custom-attr="date-string"></div>

无论如何我可以得到它，以便如果我随后构建 React 项目，如果我想用新日期更新 data-custom-attr，或者让它使用纯 JavaScript 返回当前日期，它将执行在 react 环境中所需的操作？

【问题讨论】：

"让它返回当前日期"你希望它多久更新一次？
我想让它返回我们所在的当天
无论何时安装该组件，它都会计算日期。我不清楚为什么你也存储在状态中。您是否有其他功能可以更新该状态？您遇到的具体问题是什么？
我同意@jmargolisvt。 Props 将在每次加载您的 react web 应用程序时初始化/创建，所以我认为不必担心您的日期，因为您正在考虑页面将显示的当天用户的浏览器。

标签： javascript reactjs state

【解决方案1】：

要使用 props 主动更新此内容，您需要触发重新渲染，因为您将 props 存储到状态中，或者使用诸如 componentWillUpdate 之类的生命周期方法在父级别和 @987654322 捕获更新@ 再次（我不建议使用这种生命周期方法，因为它已被 Facebook 弃用）。

就个人而言，您只需要简化您的组件。而不是 DateComponent 管理日期状态，只需将其提取到父级别并将日期道具直接传递给 html。每当开始更新时，这将更新 DateComponent。例如：

父母

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate = new Date()
    }
  }

  render = () => {
    const {currentDate} = this.state;
    return (
      <DateComponent start={currentDate} />
    )
  }
}

日期组件

class DateComponent extends Component{
  constructor(props){
    super(props);
  }

  render() {
    const {start} = this.props;
    return (
      <div data-custom-attr={start}></div>
    )
  }
}

这很酷的一点是，通过将 DateComponent 简化为静态，可以进一步简化该组件。您也可以利用其中的一些新功能，例如上下文，但是，我不会在这里讨论。

静态日期组件

const DateComponent = ({start}) => (
  <div data-custom-attr={start}></div>
)

【讨论】：