состояние против состояния в React

Question

Я работаю в новой кодовой базе. Обычно я бы настраивал состояние в компоненте React следующим образом:

class App extends React.Component {
    constructor() {
        super();
        this.state={
            foo: 'bar'
        }
     }
    ....

В этой новой кодовой базе я вижу много этого:

class App extends React.Component {
    state={
        foo: 'bar'
     }
    ....

Есть ли преимущество в этом? Кажется, они делают это только тогда, когда состояние не нужно менять. Я всегда думал о состоянии как о чем-то, с чем сталкивается React Это нормально?

Answer 1

Конечный результат обоих подходов одинаков. Оба подхода просто устанавливают начальный state компонента. Стоит отметить, что свойства класса являются предложением этапа 3 , поэтому не все среды разработки могут их использовать.

Лично мне нравится использовать вариант поля класса, если в конструкторе больше ничего не делается, так как это меньше кода для записи, и у вас нет вызова super, чтобы беспокоиться.

Пример

class Component1 extends React.Component {
  state = { value: this.props.initialValue };

  render() {
    return <div> {this.state.value} </div>
  }
}

class Component2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: props.initialValue };
  }

  render() {
    return <div> {this.state.value} </div>
  }
}

function App() {
  return (
    <div>
      <Component1 initialValue={1} />
      <Component2 initialValue={2} />
    </div>
  );
}

Answer 2

На самом деле они оба связаны с указателем this. this, сделанный в constructor из class.

В целом вы можете получить доступ к локальному состоянию с помощью this.state, но в первом стиле вы можете передать props на constructor на super, а затем использовать его в объявлении state, как показано ниже:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            foo: 'bar',
            jaz: props.someParentState,
        }
     }
....

Удивительно, вы можете получить доступ к props в constructor, не правда ли? Я определенно использую этот стиль для декларации местного штата.

Надеюсь, это поможет вам.