Является ли установка значения вне состояния и реквизита в компоненте React антишаблоном?

Question

Почти во всех разговорах о данных и React, Props и State являются двумя наиболее распространенными понятиями.Однако я заметил, что технически существует третий способ задания данных в компоненте React.Более конкретно, вы можете установить значение, установив значение на this.

Например, код, приведенный ниже, я установил три значения.Одно значение в State, одно значение в Props по умолчанию и другое в this.Я могу напечатать все три из них.

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateSecret: "foo"
    };
    this.otherSecret = "bar";
  }

  render() {
    return (
      <div className="App">
        {this.state.stateSecret}
        <br />
        {this.otherSecret}
        <br />
        {this.props.propsSecret}
      </div>
    );
  }
}

App.defaultProps = {
  propsSecret: "baz"
};

export default App;

В общем, я хочу знать, фиксирую ли я анти-шаблон, установив значение в this.Это то, что я должен избегать?

Answer 1

Нет, это не анти-паттерн, это нормально.

Если это константа, вы можете даже определить ее снаружи (4-й способ: D), например:

const otherSecret = "bar";
class App extends Component {

}

Вообще говоря:

• Определите его в состоянии, если оно изменится по некоторой логике, определенной в вашем компоненте

• Определите его в родительском элементе и передайте как пропеллересли он изменится по логике, определенной в родительском элементе

Еще одна вещь, которую следует учитывать, когда изменяется значение реквизита или состояния, компонент вызывает изменение и запускает рендеринг () еще раз, поэтому, если вы хотите отразить изменения, вы должны объявить их в состоянии или как реквизит родительского компонента.