React中this指向常用的2种修正方式

Z时代
2024-01-10
分类：综合

react

一、使用bind方法(构造函数内绑定)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>三大属性之state使用</title>
  </head>
  <body>
    <div ></div>
  </body>
  <script src="./js/babel.min.js" charset="utf-8"></script>
  <script src="./js/react.development.js" charset="utf-8"></script>
  <script src="./js/react-dom.development.js" charset="utf-8"></script>
  <script type="text/babel">
    // 1.创建虚拟DOM
    class Like extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isLike: false
        };
        // 自定义函数中的this默认指向undefined，所以需要修改this的指向
        this.handleClick = this.handleClick.bind(this);
      }
render(){
        const {isLike} = this.state;
        return <h2 onClick={this.handleClick}>{isLike ? '他喜欢我' : '他不喜欢我'}</h2>;
      }
      handleClick(){
        // 获取状态
        // console.log(this); // undefined
        const isLike = !this.state.isLike;
        // 修改状态
        this.setState({
          isLike
        })
      }
    }
    // 2.渲染
    ReactDOM.render(<Like/>, document.getElementById("test1"));
  </script>
</html>

也可以onClick={this.handleClick.bind(this)};这种方法简洁明了，但由于 function函数在每个render上重新分配，所以有性能影响。

二、使用箭头函数

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>三大属性之state使用</title>
  </head>
  <body>
    <div ></div>
  </body>
  <script src="./js/babel.min.js" charset="utf-8"></script>
  <script src="./js/react.development.js" charset="utf-8"></script>
  <script src="./js/react-dom.development.js" charset="utf-8"></script>
  <script type="text/babel">
    // 1.创建虚拟DOM
    class Like extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isLike: false
        };
        // 自定义函数中的this默认指向undefined，所以需要修改this的指向
        // 1.bind 2.箭头函数 3.
        // this.handleClick = this.handleClick.bind(this);
      }
      render(){
        const {isLike} = this.state;
        return <h2 onClick={this.handleClick}>{isLike ? '他喜欢我' : '他不喜欢我'}</h2>;
      }
      // 箭头函数修正this指向
      handleClick = () => {
        // 获取状态
        // console.log(this); // undefined
        const isLike = !this.state.isLike;
        // 修改状态
        this.setState({
          isLike
        })
      }
    }
    // 2.渲染
    ReactDOM.render(<Like/>, document.getElementById("test1"));
  </script>
</html>