React中state赋值与函数绑定的先后顺序是否会对功能造成影响？

你当前给出的两段示例代码存在笔误：state中attribute字段赋值的是作用域内的myFunction变量，和你后续绑定到实例上的this.myFunction是完全独立的两个引用，这种情况下两种写法的顺序不会产生任何差异，也不会影响后续函数调用的上下文。

我们默认你实际的需求是把实例方法this.myFunction存入state的attribute字段，这种情况下两种写法存在本质区别：

两种写法的实际差异 #

写法1：先赋值state再绑定函数 #

constructor(props) {
  super(props);
  this.state = {
    attribute: this.myFunction, // 此时取到的是类原型上未绑定实例的原始方法
  };
  this.myFunction = this.myFunction.bind(this); // 仅修改实例的myFunction属性，不会更新state中已存的引用
}

• 问题：state中存储的方法是未绑定实例上下文的原始方法，后续传递到其他组件调用时，内部的this会指向调用时的上下文而非当前组件实例，调用this.setState等依赖实例的方法会直接报错。

写法2：先绑定函数再赋值state #

constructor(props) {
  super(props);
  this.myFunction = this.myFunction.bind(this); // 先把绑定了当前实例的方法挂载到实例上
  this.state = {
    attribute: this.myFunction, // 此时取到的是已经绑定好上下文的方法
  };
}

• 效果：state中存储的方法已经绑定了当前实例的上下文，传递到任意位置调用都可以正常访问this.setState等实例属性和方法，不会出现上下文丢失问题。

最佳实践建议 #

• 不要把函数存储到state中：React的state设计初衷是存储会触发视图更新的可序列化状态数据，方法属于行为逻辑，直接挂载到组件实例即可，需要传递时直接引用this.myFunction即可，无需存入state。
• 优先使用类属性箭头函数绑定上下文：不用手动在constructor中执行bind操作，写法更简洁也不会出现顺序问题：

class MyComponent extends React.Component {
  // 箭头函数自动绑定当前实例上下文，无需手动bind
  myFunction = () => {
    this.setState({ /* 正常执行 */ })
  }

  constructor(props) {
    super(props);
    this.state = { /* 仅存数据 */ }
  }
}

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