初始化状态，没有构造函数在反应

小编典典

初始化状态，没有构造函数在反应

reactjs

import React, { Component } from ‘react’;

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

通常我看到的是，如果他使用es6类，人们会在构造函数中执行this.state。如果不是，他可能会使用getinitialstatestate函数放置状态。但是上面的代码（是的，这是一个有效的代码），两者都没有使用。我有2个问题，这里的状态是什么？那是局部变量吗？如果是，为什么没有const？prevState来自哪里？为什么在setState中使用箭头功能？这样做容易this.setState({value:'something'})吗？

阅读 246

2020-07-22

共1个答案

小编典典

关于问题2，请参见Dan的出色解答：在这种情况下，是否需要使用setState（function）重载？

不，这不是局部变量。与this.state在构造函数中声明相同。
是的，在这种情况下，您只能使用this.setState({ value: this.state.value + 1 })，结果将是相同的。

但是请注意，使用功能setState可以带来一些好处：

如果在外部声明setState函数，则可以重用它：

        const increment = prevState => ({
      value: prevState.value + 1
    })

现在，如果您有多个组件需要使用此功能，则只需在任何地方导入和重用逻辑。

    this.setState(increment)

React压扁数个setState并批量执行它们。这可能会导致某些意外行为。请参见以下示例：

http://codepen.io/CodinCat/pen/pebLaZ

        add3 () {
      this.setState({ count: this.state.count + 1 })
      this.setState({ count: this.state.count + 1 })
      this.setState({ count: this.state.count + 1 })
    }

执行此功能的count意志只会加1

如果使用功能性setState：

http://codepen.io/CodinCat/pen/dvXmwX

        const add = state => ({ count: state.count + 1 })
    this.setState(add)
    this.setState(add)
    this.setState(add)

计数将按预期增加+3。

您可以在此处查看文档：https : //facebook.github.io/react/docs/react-
component.html#setstate

2020-07-22