ReactJS / FP разница между состоянием и этим

Question

Как видно из заголовка, в чем разница между использованием "state" и "this" внутри компонента ReactJS? Если я запишу в журнале компонент «this», состояние и свойства, объявленные с использованием «this», появятся на том же «уровне» внутри объекта.

"состояние" просто кажется дополнительным свойством для переноса свойств компонента? Если бы я хотел передать «состояние» в качестве опоры другому компоненту, то, безусловно, достаточно передать «это»?

Например: *. * 1005

state = {
  isPastDelay: false,
};

componentDidMount () {
  this._delayTimer = setTimeout(() => () {
    console.log('Timeout');
  }, 200);

  console.log(this);
}

Почему бы просто не объявить _delayTimer в состоянии?

Или this._delayTimer действует как "частное" свойство?

Я бы также подумал, что _delayTimer должен быть объявлен вне componentDidMount() и ему должно быть присвоено только значение внутри метода.

Answer 1

Состояние связано с ReactJS. Это как контейнер для данных. Состояние может использоваться компонентом, в котором оно объявлено (компонент контейнера), и его дочерними компонентами. Мы всегда должны стараться сделать наше состояние максимально простым и минимизировать количество компонентов с состоянием.

Принимая во внимание, что this связано с JavaScript. this связано с контекстом. В большинстве мест this относится к функции и способу ее вызова. Следовательно, его значение может отличаться при каждом вызове функции.

Answer 2

состояние свойство необходимо для метода экземпляра setState . Когда вам нужно изменить состояние вашего компонента, вы вызываете setState , и это меняет свойство состояния. Это соглашение.

class App extends Component {

constructor() {
    super();
    this.state = {
        ticks: 0
    };
}

componentWillMount = () => {
    this.timer = setInterval(() => this.setState((state) => { return { ticks: state.ticks + 1 } }), 500);
};

componentWillUnmount = () => {
    clearInterval(this.timer);
}

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

}