React 16.x事件处理器解绑及ESLint警告解决方法问询

2. 解决React 16.x中componentWillUnmount的ESLint警告 #

先拆解你遇到的问题：你写的this.handleClick === null;是一个无意义的比较表达式——它只是在判断this.handleClick是否等于null，但这个判断结果既没被使用，也没触发任何操作，完全是无效代码，这就是ESLint的no-unused-expressions规则警告你的原因。

而且更关键的是：就算你改成this.handleClick = null;，这也不是正确的解绑方式！如果之前给DOM元素/全局对象绑定了这个方法，仅仅把组件实例上的属性设为null，并不会移除已经绑定的事件监听，依然存在内存泄漏风险。

正确解决步骤：

1. 确认事件绑定的位置
   比如你是在componentDidMount里给原生DOM绑定了事件：

   componentDidMount() {
     document.getElementById('submit-btn').addEventListener('click', this.handleClick);
     document.getElementById('my-form').addEventListener('submit', this.handleSubmit);
   }
   

2. 在componentWillUnmount里用removeEventListener解绑
   这才是真正有效的解绑方式，同时能消除ESLint警告：

   componentWillUnmount() {
     document.getElementById('submit-btn').removeEventListener('click', this.handleClick);
     document.getElementById('my-form').removeEventListener('submit', this.handleSubmit);
   }
   

修正后的完整代码示例：

class SubmitForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleClick() {
    console.log('按钮被点击');
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('表单提交');
  }

  componentDidMount() {
    // 绑定原生DOM事件
    document.getElementById('submit-btn').addEventListener('click', this.handleClick);
    document.getElementById('my-form').addEventListener('submit', this.handleSubmit);
  }

  componentWillUnmount() {
    // 正确解绑事件，消除ESLint警告
    document.getElementById('submit-btn').removeEventListener('click', this.handleClick);
    document.getElementById('my-form').removeEventListener('submit', this.handleSubmit);

    // 若确实需要清空实例上的方法（非必须），可以这么写，不会触发警告
    // this.handleClick = null;
    // this.handleSubmit = null;
  }

  render() {
    return (
      <form id="my-form">
        <button id="submit-btn" type="submit">提交</button>
      </form>
    );
  }
}

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