Javascript 一旦React项目建成，道具会发生什么变化？

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

在我的项目中，我将JavaScript日期对象作为道具传递给组件。
然后我将此数据作为状态存储在组件中。
然后，该日期状态用于更新时间线栏，该时间线栏显然需要是当前的，以便时间线继续前进

代码的简化版本如下：

日期组件文件：

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扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开始：新日期（this.props.start）
}
render（）{
返回(
)
}
}

通过道具进入：

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

在我完成的项目中，我将使用如下方式呈现一些HTML：

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

---

无论如何，我是否可以得到它，这样，如果我随后构建React项目，如果我想用新日期更新

数据自定义属性，或者使用普通JavaScript使其返回当前日期，它将执行React环境中所需的操作？
要使用道具主动更新此属性，您需要因为要将道具存储到状态而触发重新渲染，或者使用生命周期方法（如
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} />
    )
  }
}

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentDate=新日期（）
}
}
渲染=（）=>{
const{currentDate}=this.state；
返回(
)
}
}

日期组件

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

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

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

类DateComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{start}=this.props；
返回(
)
}
}

最酷的是，通过将DateComponent简化为静态，这个组件可以进一步简化。你也可以利用一些新特性，比如上下文，不过，我在这里不赘述

静态日期组件

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

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

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

const DateComponent=（{start}）=>(
)
要使用道具主动更新，您需要触发重新渲染，因为您正在将道具存储到状态，或者使用生命周期方法，如
componentWillUpdate
在父级捕获更新，然后再次
设置状态
（我不建议使用这种生命周期方法，因为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} />
    )
  }
}

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
currentDate=新日期（）
}
}
渲染=（）=>{
const{currentDate}=this.state；
返回(
)
}
}

日期组件

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

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

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

类DateComponent扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const{start}=this.props；
返回(
)
}
}

最酷的是，通过将DateComponent简化为静态，这个组件可以进一步简化。你也可以利用一些新特性，比如上下文，不过，我在这里不赘述

静态日期组件

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

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

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

const DateComponent=（{start}）=>(
)
“让它返回当前日期”您希望它多久更新一次？我想让它返回我们要安装的当前日期。它将在安装该组件时计算日期。我不清楚您为什么也以状态存储。您是否有其他函数更新该状态？您到底遇到了什么问题？我同意@jmargolisvt每次加载react web应用程序时，
道具将被初始化/创建，因此我认为不必担心您的日期，因为您会想到页面将显示在用户浏览器上的当前日期。“让它返回当前日期”您希望它多久更新一次？我想让它返回我们要安装的当前日期。它将在安装该组件时计算日期。我不清楚您为什么也以状态存储。您是否有其他函数更新该状态？您到底遇到了什么问题？我同意@jmargolisvt每次加载react web应用程序时，
道具将被初始化/创建，因此我认为不必担心您的日期，因为您想到的是页面将在用户浏览器上显示的当天。