Javascript ReactJS/FP状态与此状态之间的差异

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

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

例如：

为什么不在状态内部声明

\u delayTimer

或者，

这个.\u delayTimer

像一个“私有”财产吗

我还认为，

\u delayTimer

应该在

componentDidMount（）

之外声明，并且只在方法内部分配一个值。

属性对于实例方法setState是必需的。 当您需要更改组件的状态时，可以调用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>);
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
滴答声：0
};
}
组件将装入=（）=>{
this.timer=setInterval（（）=>this.setState（（state）=>{return{ticks:state.ticks+1}}），500）；
};
组件将卸载=（）=>{
clearInterval（这个计时器）；
}
render（）{
返回(
{this.state.ticks}
);
}

}与ReactJS有关。它就像一个数据容器。声明状态的组件（容器组件）及其子组件可以使用状态。我们应该总是尽量使状态尽可能简单，并尽量减少有状态组件的数量

---

然而，与JavaScript相关<代码>此与上下文相关。在大多数地方，

此

与函数及其调用方式有关。因此，每次调用函数时，它的值可能不同

这些是非常不同的事情。您应该阅读javascript中的

这个

——它在不同的上下文中有不同的含义：您可以将

状态

看作是在给定时间点绑定到组件的数据的状态。状态用于触发组件的重新呈现。在您的情况下，您可能会使用state作为_delayTimer，但这是毫无意义的，因为您不希望它引发任何重新渲染，这就是为什么这些类型的属性与state@Axnyff现在这开始变得更有意义了，“国家”也是作为setState方法的ReactJS的约定显然不适用于普通JavaScript FP？我问这个问题的原因是因为我也见过开发人员在纯JavaScript中使用状态。我猜那个状态是ReactJS刚刚扩展的FP约定？setState是标准React.Component类的一部分。它不是JavaScript的一部分。当您看到开发人员在纯JS中使用state变量时，这是因为该关键字的语义不同，具体取决于执行的上下文。请参阅此处有关该语义的详细信息：如果您更新答案以在ReactJS中包含该状态，那么它也会触发重新呈现，并且不需要包含_delayTimer因为这会触发不必要的重新渲染，所以我可以勾选这个答案。

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