Question

正如标题所问，在ReactJS组件中使用“ state”和“ this”有什么区别？如果我控制台记录组件的“ this”，则使用“ this”声明的状态和属性将在对象内的同一“级别”上显示。

“状态”似乎是包装组件属性的附加属性？如果我想将“状态”作为道具传递给另一个组件，那么肯定通过“ this”就足够了吗？

例如：

state = {
  isPastDelay: false,
};

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

  console.log(this);
}

为什么不只在内部声明_delayTimer？

还是this._delayTimer表现得像“私有”财产？

我还认为_delayTimer应该在componentDidMount()之外声明，并且只在方法内部分配一个值。

Answer 1

State与ReactJS相关。它就像数据的容器。 State 可以由声明它的组件（容器组件）及其子组件使用。我们应该始终尝试使状态尽可能简单，并减少有状态组件的数量。

this与JavaScript有关。 this与上下文有关。在大多数地方，this与一个函数及其调用方式有关。因此，每次调用该函数的值可能都不同。

Answer 2

实例方法 setState 需要

state属性。当您需要更改组件的状态时，请调用 setState ，它会更改state属性。这是一个惯例。

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>);
}

}

ReactJS / FP之间的区别

2 个答案: