React中this值绑定和事件函数传参

向右看齐 2023-06-13 06:02 13阅读 0赞

Javascript中的`this`值总是能让很多初学者感到困惑，总的来说`this`值就是指向调用函数的那个对象。但是`call`, `apply`, `bind`方法和ES6中箭头函数让`this`值还是要具体情况具体分析，不过这块知识点并不是很难，对应的博客也很多，花点时间就能掌握。接下来主要介绍React中`this`值绑定和事件函数传参。

## React中this值绑定 ##

React中也有`this`值的绑定问题，接下来将介绍五种绑定模式。

### 使用React.createClass ###

如果你使用`React.createClass`来创建组件，那么React会自动把函数中的`this`值指向组件实例。

React.createClass({
        getInitialState: function() {
            return {
                text: 'text'
            };
        },
        handleChange: function(event) {
            this.setState({
                text: event.target.value
            });
        },
        render: function() {
            return (
                <div>
                    Type something:
                    <input onChange={this.handleChange} value={this.state.text} />
                </div>
            )
        }
    })
    复制代码

上面的例子中`input`的`onChange`处理函数直接指向了`handleChange`方法，在使用`React.createClass`方法创建组件中这是可行的。

要注意的是，`React.createClass`在React 16.0.0 版本中就从核心包移除出去了，要从 create-react-class 中获取。

同时官方是推荐使用 ES6 类语法来进行组件的定义，所以这个`this`值的绑定方法是不推荐的。

### 在Render函数中绑定 ###

通常我们都是使用 ES6 类语法来进行组件的定义，此时 React 并不会自动绑定 `this`值。一种解决方法是在`render`函数中进行 `this`值绑定：

onChange={this.handleChange.bind(this)}

这种方法简明清晰，但是对性能会有些影响，因为每次渲染时都会使用`bind`方法创建一个新函数。

### 在Render函数中使用箭头函数 ###

这个方法和使用`bind`函数有些类似，你可以在`render`中使用箭头函数来保证`this`值是指向组件实例的。

onChange={e => this.handleChange(e)}

同样的这种方法也是对性能有影响的，箭头函数每次渲染时都要重新创建。

### 在构造函数中进行绑定 ###

在构造函数中进行`this`值的绑定应该是大多数人在使用的，它避免了每次渲染时都要重新创建事件方法。

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
    }

但是有时方法比较多的情况下，构造函数中充满了绑定方法，显得很冗长。

### 定义类属性的时候使用箭头函数 ###

这种语法还在提案阶段，你可以使用transform-class-properties 或者 Babel 中的 stage-2 来完成转码。

handleChange = () => {
      // call this function from render 
      // and this.whatever in here works fine.
    }

箭头函数的`this`中是指向外层作用域中`this`值的。所以这个方法中`this`值总是指向组件实例的，同时它也不会也上边提到的性能问题。所以说推荐使用这种方法来处理`this`的绑定。

## 事件传参 ##

讲完了`this`值的绑定，接下来快速讨论下事件函数的传参问题。

### 简单快速的方法 ###

*  在使用`bind`函数的时候进行传参。

<th value={column} onClick={this.handleSort.bind(null, column)}>{column}</th>

这边提一下，`event`对象也会在你的传输后面默认传入。

*  箭头函数传参

<th value={column} onClick={(event) => this.handleSort(column, event)}>{column}</th>

从DOM元素属性中获取

handleSort(event) {
        const value = event.target.getAttribute('value')
    }
     
    <th value={column} onClick={this.handleSort}>{column}</th>

### 抽离出一个子组件 ###

抽离出一个子组件，这样可以避免渲染时一直重新创建事件函数导致的性能问题。

首先主模块：

{this.props.defaultColumns.map((column) => (
      <TableHeader
        value={column}
        onHeaderClick={this.handleSort}
      />
    ))}

子组件：

class TableHeader extends Component {
      handleClick = () => {
        this.props.onHeaderClick(this.props.value);
      }
     
      render() {
        return (
          <th onClick={this.handleClick}>
            {this.props.column}
          </th>
        );
      }
    }

子组件继承`PureComponent`只会在`props`发生改变时才会重新渲染(自动浅比较)。

这个最佳实践在[`eslint-plugin-react`][eslint-plugin-react]中也是有的，所以推荐写代码时开启Eslint。

### `render`里面尽量减少新建变量和`bind`函数，传递参数是尽量减少传递参数的数量 ###

首先我们先思考一个问题，比如我要实现一个点击按钮使相应的`num`增加1，我们有哪一些方法。

大家应该都能想到，无非就是三种，如下图：

![format_png][]

react\_function

第一种是在构造函数中绑定`this`，第二种是在`render()`函数里面绑定`this`，第三种就是使用箭头函数，都能实现上述方法；

但是哪一种方法的性能最好，是我们要考虑的问题。应该大家都知道答案：**第一种的性能最好**。

**因为第一种，构造函数每一次渲染的时候只会执行一遍(推荐使用)；**

**而第二种方法，在每次`render()`的时候都会重新执行一遍函数；**

**第三种方法的话，每一次`render()`的时候，都会生成一个新的箭头函数，即使两个箭头函数的内容是一样的。**

第三种方法我们可以举一个例子，因为`react`判断是否需要进行`render`是**浅层比较**，简单来说就是通过`===`来判断的，如果`state`或者`prop`的类型是字符串或者数字，只要值相同，那么浅层比较就会认为其相同；

**但是如果前者的类型是复杂的对象的时候，我们知道对象是引用类型，浅层比较只会认为这两个`prop`是不是同一个引用，如果不是，哪怕这两个对象中的内容完全一样，也会被认为是两个不同的`prop`。**

举个例子：

当我们给组件`Foo`给名为`style`的`prop`赋值；

<Foo style={
       { color:"red" }}

使用这种方法，每一次渲染都会被认为是一个`style`这个`prop`发生了变化，因为每一次都会产生一个对象给`style`。

那么我们应该如何改进，如果想要让`react`渲染的时候认为前后对象类型`prop`相同，则必须要保证`prop`指向同一个`javascript`对象，如下：

const fooStyle = { color: "red" }; //取保这个初始化只执行一次，不要放在render中，可以放在构造函数中
    
    <Foo style={fooStyle} />

这个问题是我们在平时的编码中可以避免的。

## 总结 ##

*  `this`值的绑定首先推荐使用类属性箭头函数的方式来处理，其次是在构造函数中进行绑定。
 *  事件函数传参可以抽离一个子组件或者从DOM属性获取来完成。不考虑性能可能在render函数中进行传参。

[eslint-plugin-react]: https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fyannickcr%2Feslint-plugin-react%2Fblob%2Fmaster%2Fdocs%2Frules%2Fjsx-no-bind.md%23protips
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTA1MzQyLTBmNDBjYTA5NjgxYTVmMTQucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTIwMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png