React中无箭头函数的写法及setState回调、prevState相关问题咨询

一、不使用箭头函数改写代码 #

你原来的increaseCount用了类属性箭头函数，核心是为了把this绑定到组件实例，避免在回调中出现this指向丢失的问题。如果不用箭头函数，有三种常用方案：

方式1：构造函数中手动绑定this #

这是性能最优的方式，仅在组件初始化时绑定一次：

import React from "react";
import { render } from "react-dom";
const styles = { fontFamily: "sans-serif", textAlign: "center" };

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // 关键步骤：手动将increaseCount的this绑定到组件实例
    this.increaseCount = this.increaseCount.bind(this);
  }

  // 普通类方法，无需箭头函数
  increaseCount() {
    // 这里的this已正确指向组件实例，可正常调用this.setState
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div style={styles}>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increaseCount}>Increase</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

方式2：在onClick中用bind绑定 #

这种写法简单，但每次组件渲染都会创建新的函数实例，适合小型组件：

// 将render中的按钮改为：
<button onClick={this.increaseCount.bind(this)}>Increase</button>

方式3：在onClick中用匿名函数包裹 #

同样每次渲染会生成新函数，适合简单场景：

// 将render中的按钮改为：
<button onClick={() => this.increaseCount()}>Increase</button>

二、关于setState的回调函数问题 #

1. 为什么第一种方法两次调用只加1？ #

你提到的第一种方法应该是这样的：

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

React会把同步代码里的多个setState调用合并成一次更新。也就是说，这两次调用都是基于同一个初始this.state.count值（比如初始为0），两次计算都是0+1，最终合并后count只会变成1，而非2。

2. 使用回调函数的正确方式 #

当你的更新依赖于前一次的state值时，必须使用setState的函数形式，而非对象形式。正确写法如下：

// 两次调用会正确累加
this.setState(prevState => ({ count: prevState.count + 1 }));
this.setState(prevState => ({ count: prevState.count + 1 }));

这种方式下，React会保证每次回调接收的prevState是上一次更新后的最新state快照。第一次调用后count变为1，第二次调用基于1变为2，最终结果就是2。

3. 为什么箭头函数可以生效？ #

这里分两种场景理解：

• 类属性的箭头函数：箭头函数没有自己的this，会继承外层作用域的this（也就是组件实例），所以在increaseCount里能正确访问this.setState和this.state，不会出现this为undefined的问题。
• setState回调里的箭头函数：其实不管是箭头函数还是普通函数，只要传递的是接收prevState的函数，都能生效。箭头函数只是语法更简洁，它不需要自己的this，因为我们已经通过prevState获取了需要的状态。

4. prevState.count是怎么定义的？ #

prevState是React自动传递给回调函数的参数，它是当前更新发生前的state快照。初始时你设置了state = { count: 0 }，所以第一次调用回调时prevState.count就是0；第一次更新完成后，state变成{ count:1 }，第二次调用回调时prevState.count就变成1，以此类推。你不需要手动设置prevState，React会自动管理这个参数的取值。

内容的提问来源于stack exchange，提问作者DCR