React PureComponent中this指向undefined问题及this关键字修改方法

以下是三种合法的this绑定方案，可按需选择：

• 构造函数内手动bind（兼容性最好，无额外性能损耗）

class MyComponent extends PureComponent {
  constructor(props) {
    super(props);
    // 构造阶段完成this绑定，仅执行一次
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this); // 正确指向当前组件实例
  }

  render() {
    return <button onClick={this.handleClick}>CLICK</button>;
  }
}

• 类属性箭头函数写法（你示例中使用的方案，语法简洁）
  该方案本身已经默认绑定了当前组件实例的this，如果使用时仍然出现undefined，优先排查两个问题：
  1. 你给出的示例代码中render方法缺少return语句，属于语法错误，修正后再验证
  2. 确认编译环境是否支持类字段提案语法，低版本Babel需要手动引入@babel/plugin-proposal-class-properties插件开启支持
     修正后的正确示例：

class MyComponent extends PureComponent {
  // 类属性箭头函数自动绑定this到当前实例
  handleClick = () => { 
    console.log(this); 
  }
  render() {
    // 补充缺失的return语句
    return <button onClick={this.handleClick}>CLICK</button>;
  }
}

• 渲染时箭头函数包裹（不推荐使用，会影响PureComponent性能）
  这种写法每次render都会生成新的函数实例，破坏PureComponent的浅比较逻辑，容易导致不必要的重渲染，仅适合临时调试使用：

class MyComponent extends PureComponent {
  handleClick() {
    console.log(this);
  }

  render() {
    return <button onClick={() => this.handleClick()}>CLICK</button>;
  }
}

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