好程序员分享React-010-事件处理函数的this指向问题，区分普通函数与事件处理函数
在明水等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、网站设计 网站设计制作按需策划,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸营销网站建设,明水网站建设费用合理。
1、普通函数是直接调用的。不存在 this 指向问题，谁调用的，this指向就是谁。
2、普通函数没有事件对象 event
3、事件处理函数其实也是一个函数，只是他绑定在某个事件上。
4、事件处理函数的 this 默认指向undefined
解决this指向问题的4种办法
1、直接在事件绑定的地方加上 .bind(this)
2、使用箭头函数
onClick={event => { this.handleClick(event); }} > 点我 3、在构造函数中统一进行this指向的绑定 constructor() { super(); this.handleClick = this.handleClick.bind(this); } render() { return ( ) } 4、使用实验性质的 public class fileds 语法。要去使用的话，的需要babel插件的支持. 1、安装 @babel/plugin-proposal-class-properties babel 插件 2、去 babel 的配置文件中，配置好 3、从新启动项目 class App extends React.Component { handleClick = ()=> { console.log(this); }; } 为啥要使用 bind 来修改this指向，而不能使用 apply、call? 因为 apply 与 call 他们会直接执行函数，而 bind 会返回一个新的函数。 在调用子组件的时候，需要传递一个方法下去，这时这个方法的this绑定推荐使用哪几种： 推荐使用：在构造函数中的bind 与 public class fileds 语法。 1、首先要知道的是，父组件render，子组件一定会render 2、我们希望如果子组件没有发生变化，那么在 父组件render的时候，让子组件不做render。节省性能。 3、要实现第2点，可以让子组件继承的是PureComponent 4、PureComponent 。它会帮助我们计算子组件接收到的porps有没有发生变化，如果有那么就render .如果没有就阻止render // 由于 .bind() 方法每次都会返回一个新的函数，所以这种方式不推荐。。。。 // 由于 每次执行到这行代码，箭头返回都是一个新的箭头函数，所以这种方式不推荐 constructor() { super(); this.handleFn1 = this.handleFn1.bind(this) } // 由于 constructor 构造函数只会执行一次，后续执行到 Child 的代码，传递过去的 onFn1 没有发生变化 // 所以这种方式推荐 handleFn1= ()=> { ... } // 这种方式同样也推荐。
标题名称：好程序员分享React-010-事件处理函数的this指向问题
链接URL：http://bjjierui.cn/article/gcjogd.html
