React组件中的函数绑定this的几种方式
React组件中的函数绑定this的几种方式
在React中使用class定义组件时如果不注意this的指向问题,会带来一些麻烦。
绑定this主要有下面两种方法:
1. bind()
在class中定义函数,然后在构造方法中使用bind()绑定当前的组件对象。
class MyComponent extends React.Component { constructor(props) { super(props) ; this.handleClick = this.handleClick.bind(this) ; } handleClick() { //... } render() { return ( <div> <button onClick={this.handleClick}>点击</button> </div> ) } }
2. 箭头函数
箭头函数中的this指向定义函数定义时所在的执行环境。而不是运行时所在的环境。
class MyComponent extends React.Component { constructor(props) { super(props) ; } handleClick = () => { //... } render() { return ( <div> <button onClick={this.handleClick}>点击</button> </div> ) } }
组件中,哪些函数需要绑定当前组件对象呢,主要有:
1. 事件处理函数
2. 作为自定义属性传入子组件的函数
class MyComponent extends React.Component { constructor(props) { super(props) ; } commentAdd = () => { //... } render() { return ( <div> <CommentList CommentAdd={this.commentAdd} /> </div> ) } }
CommentList是一个子组件,从父组件中传入了一个函数作为这个子组件的自定义属性。
3. 异步操作的回调函数
class MyComponent extends React.Component { constructor(props) { super(props) ; this.state = { title: 'hello world' } } componentDidMount() { setTimeout((function() { this.setState({ title: '你好,世界' }) }).bind(this), 1000) } render() { return ( <div> <h1>{this.state.title}</h1> </div> ) } } ReactDOM.render(<MyComponent/>, document.querySelector('#app'))
setTimeout()的第一个参数是一个回调函数。此时这个回调函数需要绑定当前的组件对象,因为回调函数内需要组件的一些方法和属性。
总结
凡是组件内自定义的函数,都要绑定组件对象。而且最好使用箭头函数定义函数。这样函数内部的this直接指向当前的组件对象。
组件中不能使用立即执行的函数。