react系列-bind this
来源:互联网 发布:网络远程教育大学 编辑:程序博客网 时间:2024/06/08 23:21
react系列-bind this
问题
对于大多数前端开发来说,JavaScript 的 this 关键字会造成诸多困扰,由于 JavaScript 代码中的 this 指向并不清晰。在写react应用时,也会也到很多作用域绑定引起的问题,React组件ES6的写法,不会将方法内部的作用域自动绑定到组件的实例上。
下面展示一段问题代码
class Search extends Component { static propTypes = { onSearch: React.PropTypes.func.isRequired } onSearch() { console.log('表单值:', this.field.getValues()); this.props.onSearch(this.field.getValues()); } render(){ const {init} = this.field; return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={this.onSearch}>搜索</Button> </Form> </div> }}
如果你真的尝试这么做了, 你会发现在onSearch中,因为this指向的是全局对象window而报错。
解决办法
我们都知道常规改变函数作用域的无非3种(Fiontion.prototype.bind call apply 三兄弟),下面讲解一下在es6中bind作用域的几种方式。
使用Function.prototype.bind()
class Search extends Component { render(){ return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={this.onSearch.bind(this)}>搜索</Button> </Form> </div> }}
ES7函数绑定语法
在 ES7 中,有一个关于 bind 语法 的提议,提议将 :: 作为一个新的绑定操作符, 而且已经收录在stage-0提案中,实际上::是Function.propotype.bind()的一种语法糖。 幸运的是,Babel已经提供了对这个新语法的支持。
class Search extends Component { render(){ return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={::this.onSearch}>搜索</Button> </Form> </div> }}
在构造函数中bind this
class Search extends Component { constructor(props) { super(props); this.onSearch = this.onSearch.bind(this) } render(){ return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={this.onSearch}>搜索</Button> </Form> </div> }}
使用箭头函数
class Search extends Component { render(){ return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={(...args)=>{ this.onSearch( ...args) }}>搜索</Button> </Form> </div> }}
core-decorators.js
core-decorators.js 为开发者提供了一些实用的 decorator,其中实现的autobind修饰器能使得方法中的this对象绑定到原始对象
class Search extends Component { @autobind onSearch() { console.log('表单值:', this.field.getValues()); this.props.onSearch(this.field.getValues()); } render(){ const {init} = this.field; return <div> <Form direction="hoz" labelAlign="left"> <FormItem label="loginID:"> <Input placeholder="请输入loginID" {...init('loginID')}/> </FormItem> <Button type="primary" onClick={this.onSearch}>搜索</Button> </Form> </div> }}
总结
比较
这里我们讨论下以上几种将this绑定到react组件方案的缺点,优点自己体会吧。
方案1和方案2,缺点也很严重,这种方式破坏了组件的pure render,每次组件render时,子组件Button的onClick值都是重新赋值所得,会导致Button做一次无谓的render。而且函数绑定语法::属于es7草案中的特性,尚未纳入es标准。使用需要谨慎。
方案3和方案4会增加代码量
方案5需要引入第三方库,不过core-decorators.js提供了很多使用的装饰器。
场景
某些场景下,我们需要传递额外的参数,比如列表中删除操作,需要传id。常用的方案是方案1和方案4
// Function.prototype.bind()<Item onClick={this.doDelete.bind(this, id)}>删除</Item>// 箭头函数<Item onClick={(...args)=>{ this.doDelete(id, ...args)}}>删除</Item>
- react系列-bind this
- React的bind(this)
- react-native react 中的bind(this)
- react 的 bind this 几种方法
- react native 代参bind this 的两种方式
- React事件处理函数中绑定this的bind()函数
- React点击事件的bind(this)传参问题
- react native 代参bind this 的两种方式
- React点击事件的bind(this)传参问题
- react native onPress响应方法是否加bind(this)
- React-native 知识点-this.bind-返回键-React.cloneElement-控件显示隐藏-ScrollView
- React中bind以及this处理,获取当前操作的元素
- React中的bind
- React bind selcet
- $(this).bind("change",itemno_change);
- ES6 中的 bind(this)
- 【React Native】React Native的bind方法
- this的异步绑定.bind(this)
- Android图片压缩(质量压缩和尺寸压缩 File, Stream和Bitmap)
- [MACOS] Mac上的抓包工具Charles
- bzoj 3437: 小P的牧场
- 百炼 4088 集合运算
- Maven Require Release Dependencies
- react系列-bind this
- Linux设备驱动总线模型简介
- 司机体验准备
- JavaScript_基础_window对象
- MAC中设置redis
- 整理一些常用js
- 爱因斯坦与玻尔:两个人的一百年
- 14.5 Interrupt中断的使用
- Mybatis3+Spring4+SpringMVC4 框架整合环境搭建