javascript - React 项目构建后，props 会发生什么？

Question

我正在 React 中构建一个项目，但遇到了一个我不知道如何解决的问题，因为从概念上讲它超出了我的范围。

在我的项目中，我将 JavaScript Date 对象作为 props 传递给组件。
然后我将此数据作为状态存储在组件中。
然后，该日期状态用于更新时间线栏，显然该时间线栏需要保持最新状态才能使时间线进展。

代码的简化版本如下:

日期组件文件:

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>
    )
  }
}

传递 Prop :

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

在我完成的项目中，我将呈现一些 HTML，如下所示:

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

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

Answer 1

要使用 props 主动更新，您需要触发重新渲染，因为您将 props 存储到状态中，或者使用像 componentWillUpdate 这样的生命周期方法来捕获更新父级别并再次 setState (我不建议使用此生命周期方法，因为 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>
)