标签：定义 一个 stat click 写法 context extend 不能 ops
// 写法一 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> ); }
用一个箭头函数将其包裹住
标签：定义 一个 stat click 写法 context extend 不能 ops
原文地址：https://www.cnblogs.com/xiaochengzi/p/9674709.html
