React中this指向问题

2023-11-22 15:42:22

问题导入

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的转义，所以没有任何问题

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

码农公寓