Реакция. js: Должен ли JavaScript объект даты считаться реквизитом или состоянием?

Question

Вероятно, естественно, что все, начиная с React, испытывают путаницу между реквизитом и состоянием.

Существует общее различие, что если компоненту необходимо изменить один из своих атрибутов в какой-то момент времени, состояние должно быть используется, в противном случае это должен быть реквизит.

Я подошел к точке, где я решил ввести дату авторского права в нижний колонтитул. Вы можете увидеть это на примере ниже:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      copyrightYear: new Date("2019").getFullYear(),
      currentYear: new Date().getFullYear()
    };
  }
render() {
    return (
      <div className="container">
        <Header />
        <MainContent />
        <Footer
          handleCopyrightDate={() => {
            if (this.state.currentYear === this.state.copyrightYear) {
              return (
                <h3>
                  Copyright &copy; {this.state.copyrightYear}. Company Name
                </h3>
              );
            } else if (this.state.currentYear > this.state.copyrightYear) {
              return (
                <h3>
                  Copyright &copy; {this.state.copyrightYear} -
                  {this.state.currentYear}. Company Name
                </h3>
              );
            }
          }}
        />
      </div>
    );
  }
}
const Footer = props => {
  return (
    <footer className="footer">
      <div className="copyright">{props.handleCopyrightDate()}</div>
    </footer>
  );
};
const appRoot = document.querySelector("#app");
ReactDOM.render(<App />, appRoot);

Вначале я решил перейти к состоянию, но теперь я начинаю сомневаться, должен ли этот небольшой фрагмент кода действительно нуждаться в состоянии ? Если да, где я должен включить setState? Должен ли я создавать setInterval и менять его каждый год или пропустить через реквизиты?

У меня только один начальный год или год авторского права, чтобы он был постоянным значением, а текущий год - для автообновления при каждом изменении года.

Answer 1

Я бы не стал использовать:

const Footer = () => {
  const copyrightYear = new Date("2019").getFullYear();
  const currentYear = new Date().getFullYear();
  const year = currentYear === copyrightYear
    ? (
      <h3>
        Copyright &copy; {this.state.copyrightYear}. Company Name
      </h3>
    )
    : (
      <h3>
        Copyright &copy; {copyrightYear} - {currentYear}. Company Name
      </h3>
    )

  return (
    <footer className="footer">
      <div className="copyright">{year}</div>
    </footer>
  );
};

В качестве альтернативы, вы знаете, что это уже не 2019, поэтому вы можете просто сделать

<footer className="footer">
  <div className="copyright">2019 - {new Date().getFullYear()}</div>
</footer>