React中this指向问题

问题导入

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
    state = {
      msg: 'hello react'
    }

    handleClick () {
      console.log(this, '8888') // 这里的this是？
    }

    render () {
      console.log(this, 'render里的this') // 这里的this是？
      return (
            <div>
                <button onClick={this.handleClick}>点我</button>
            </div>
      )
    }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

• render方法中的this指向的而是当前react组件。

• 事件处理程序中的this指向的是undefined

分析原因

• class的内部，开启了局部严格模式use strict，所以this不会指向window undefined

• onClick={this.fn}中，this.fn的调用并不是通过类的实例调用的，所以值是undefined

• render函数是被组件实例调用的，因此render函数中的this指向当前组件

这样看的话可能不是很清楚我们换一种写法

 非严格模式 一般都是挂在window上的 claa内部是默认开启了严格模式 而严格模式中 由于相对于没有被谁调用所以值是undefined

知道了是this指向问题 大体解决方法如下

this指向解决方案

有三种方式

方式1  Function.prototype.bind(this)

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick= {this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

方式2  箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => {this.handleClick()}}>点我</button>
      </div>
    )
  }
}

缺点：1，需要额外包裹一个箭头函数，影响性能， 结构不美观  

方式3：class 的实例方法【推荐】

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

 注意：这个语法是试验性的语法，但是有babel的转义，所以没有任何问题

在实际开发中方式三使用最多 最方便 推荐使用