• bind this
    • 关于 event 参数
    • 传递自定义参数
    1. constructor() {
    2.   this.clickHandler = this.clickHandler.bind(this)
    3. }
    4. render() {
    5.   return <p onClick={this.clickHandler}>{this.state.name}</p>
    6. }
    7. clickHandler() {
    8.   this.setState({ // this默认是undefined
    9.     name: 'list'
    10.   })
    11. }
    12. clickHandler2 = () => {
    13.   this.setState({ // 静态方法，this指向当前实例
    14.     name: 'list'
    15.   })
    16. }
    17. clickHandler3(event) {
    18.   event.preventDefault(); // 阻止默认行为
    19.   event.stopPropagation(); // 阻止冒牌
    20.   /*
    21.     这里 event 不是原生的，这个的 __proto__.constructor 指向的是一个框架合成的 SyntheticEvent，这个模拟了 dom 事件的所有能力
    22.     而 vue 的 event 是原生的 MouseEvent
    24.     在 react 中 event.nativeEvent 则是原生的那个
    26.     event.nativeEvent.target 指向的是鼠标点击的那个元素
    27.     event.nativeEvent.currentTarget 绑定事件的元素则指向了 #document
    29.     ！！！React17开始，事件就不再绑定到 document 上了
    30.   */
    31. }
    32. clickHandler4(arg1, arg2, event) {
    33.   // 最后追加的一个参数 是event
    34. }
    • React16 事件绑定到 document
    • React17 事件绑定到 root组件上
    • 17这样做有利于多个React版本并存，例如微前端

    image.png