jsx事件绑定-this的三种绑定方式

1.bind
2.使用箭头函数
3.使用回调函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计数器</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
      // const obj = {
      //   name: "obj",
      //   foo: function() {
      //     console.log("foo:", this)
      //   }
      // }

      // // obj.foo()

      // const config = {
      //   onClick: obj.foo.bind(obj)
      // }

      // const click = config.onClick
      // click()

      /*
      this的四种绑定规则:
        1.默认绑定 独立执行 foo()
        2.隐式绑定 被一个对象执行 obj.foo() -> obj
        3.显式绑定: call/apply/bind foo.call("aaa") -> String("aaa")
        4.new绑定: new Foo() -> 创建一个新对象, 并且赋值给this
    */

      // 1.定义App根组件
      class App extends React.Component {
        // class fields
        name = "App";

        constructor() {
          super();
          this.state = {
            message: "Hello World",
            counter: 100,
          };

          this.btn1Click = this.btn1Click.bind(this);
        }

        btn1Click() {
          console.log("btn1Click", this);
          this.setState({ counter: this.state.counter + 1 });
        }

        btn2Click = () => {
          console.log("btn2Click", this);
          this.setState({ counter: 1000 });
        };

        btn3Click() {
          console.log("btn3Click", this);
          this.setState({ counter: 9999 });
        }

        render() {
          const { message } = this.state;

          return (
            <div>
              {/* 1.this绑定方式一: bind绑定 */}
              <button onClick={this.btn1Click}>按钮1</button>

              {/* 2.this绑定方式二: ES6 class fields */}
              <button onClick={this.btn2Click}>按钮2</button>

              {/* 3.this绑定方式三: 直接传入一个箭头函数(重要) */}
              <button onClick={() => console.log("btn3Click")}>按钮3</button>

              <button onClick={() => this.btn3Click()}>按钮3</button>

              <h2>当前计数: {this.state.counter}</h2>
            </div>
          );
        }
      }

      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(<App />);
    </script>
  </body>
</html>

第一种

默认绑定，就算直接执行函数，在严格模式下是undefined的。
默认情况下，在es6 class里面定义的所有函数都是严格模式。

image.png

用bable进行代码转换的时候，babel会将代码转换成严格模式。会在转换后的代码头写上"use strict".
在babel里面
<script type="text/babel">
</srcipt>
定义这个bar函数，执行的结果也是undefined

image.png

render函数里面的this是实例对象。

直接写onClick={this.btnClick}不是隐式调用。因为没有括号this.btnClick（），而是直接把函数地址赋值给onClick
React.createElement("button", {onClick:this.btnClick})
const click = config.onclick
触发事件的时候是在严格模式下单独执行click（）。所以里面的this指向的是undefined

解决方法

image.png

另一种写法

image.png

第二种

      function Person(name, age) {
        this.name = name;
        this.age = age;
        this.showName = () => {
          console.log(this.name);
        };
      }

      const p1 = new Person("tom", 18);
      const test = p1.showName;
      test(); //tom

第三种

就是隐式绑定
onClick={函数}
这个函数可以是箭头函数，返回值是一个函数的调用的化，就和前面直接传入函数是一样的。一个是让Onclick直接调用，一个是间接调用。
<button onClick={() => this.btn3Click()}>按钮3</button>
this.btn3Click()这个this是render函数的this，就算组件实例，组件实例有bn3Click的这个方法，隐式调用。