React Click事件处理最佳实践

Question

学习React时，我看到人们处理事件的方式不同。处理点击事件的最佳做法是什么？这样好吗？将事件添加到要调用的类对象中？import React from "react";class Foo extends React.Component {   constructor(props) {     super(props);     this.state = {};     handleClick = handleClick.bind(this)   }   handleClick(){     //Do some stuff   }   render(){     return(       <div onClick={this.handleClick}>         Foo       </div>)   }}export default Foo;还是这样？要在渲染“部分”中声明函数import React from "react";class Bar extends React.Component {   constructor(props) {     super(props);     this.state = {};   }   render(){     const handleClick = () => {       //Do some stuff     }     return(       <div onClick={handleClick}>         Bar       </div>)   }}export default Bar;有没有更好的办法？哪种编码模式最好？

Answer 1

官方文件反应使用：

...
    handleClick = handleClick.bind(this)...

但我认为，使用以下内容也更好：从“反应”中导入React;

class Bar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  handleClick = () => {
    //Do some stuff
  }
  render(){
    return(
      <div onClick={this.handleClick}>
        Bar
      </div>)
  }}export default Bar;

使用第二种方法，您不必关心使用.bind()。

Answer 2

我没有看到你提到的第二种方式，并且不建议这样做，因为它将为每个渲染创建一个新函数。

我这样做的方式是这样的：

class Foo extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  handleClick = () => {

    //Do some stuff

  }

  render(){

    return(

      <div onClick={this.handleClick}>

        Foo

      </div>)

  }

}

export default Foo;

这样，您不需要构造函数中的绑定，但该函数仍然只创建一次。

Answer 3

你的第一种方法，使用你在构造函数中绑定的原型函数，除了你缺少的东西之外是好的this：

this.handleClick = this.handleClick.bind(this);

你的第二种方法是在每个渲染中创建一个新函数render。这使得handleClick为测试目的而难以模拟。

您经常看到的第三种方法涉及在构造函数中在构造时创建箭头函数：

this.handleClick = event => {
    // ...};

或使用财产声明：

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };}

这些都具有相同的模拟/可测试性问题。

除此之外，他们没事。