React几种函数的写法

Posted 2021-01-07 xiaochengzi

// 写法一
export default class App extends React.Component {
    tableHeader = () => {};
}
// 写法二
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.tableHeader = this.tableHeader.bind(this);
    }
    tableHeader() {
    };
}
// 写法三
export default class App extends React.Component {

    tableHeader() {
    };
}
// 写法四
class  App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick= ()=>{
  }
  render() {
    return (
      <button onClick={this.handleClick}>点击</button>
    );
  }
}
// 写法五
export default class App extends React.Component {
    handleClick() {
    };
    render(){
        return (
        <button onClick={()=> {this.handleClick();}}>点击</button>
        );
    }
}

分析

主要是函数内this指向不同

第一种写法还不是js标准，但是babel已经支持了。相当于让tableHeader的值为一个箭头函数，而箭头函数的特性我们都知道：它内部没有this，它会使用定义时的this，这里this就会指向这个类的实例。

第二种写法它的目的和第一种是一样的，让函数内部的this指向这个类的实例，它是用bind实现的，bind的第一个参数表示context，就是this。

第三种写法就是普通的写法，之所以会有前面两种写法，就是因为第三种写法可能会出问题。

举个简单的例子，按第三种方式写：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }
}

这段代码实际上是不能工作的，因为handleClick内部用到了this.setState，而handleClick执行时，this是undefined。

如果想要它工作，可以改成前两种的写法，或者这样改：

  render() {
    return (
      <button onClick={ ()=>{ this.handleClick() } }>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }

用一个箭头函数将其包裹住