javascript - react 性能 : anonymous function vs named function vs method

Question

我想知道，在 React.js 中，在组件中声明匿名函数、命名函数或方法之间是否存在性能差异。

具体来说，以下一项是否比其他项更高效？

class MyComponent extends React.Component {
  render() {
    return (
      <input
        type="text"
        value={foo}
        onChange={(e) => {
          this.setState({ foo: e.target.value });
        }}
      />
    );
  }
}

---

class MyComponent extends React.Component {
  ...
  render() {
    function handleChange(e) {
      this.setState({ foo: e.target.value });
    }
    return (
      <input
        type="text"
        value={foo}
        onChange={handleChange}
      />
    );
  }
}

---

class MyComponent extends React.Component {
    ...
    handleChange(e) {
      this.setState({ foo: e.target.value });
    }

    render() {
      return (
        <input
          type="text"
          value={foo}
          onChange={this.handleChange}
        />
      );
    }

}

Answer 1

是的，肯定有，您的代码的第三个版本是在 React 组件的渲染 block 中引用函数的正确方法。

为什么？

通常，嵌套函数被认为是将被调用不止一次或两次的方法的反模式；这主要是由于 JavaScript 引擎将函数视为任何其他值，并且必须创建并随后在父调用完成后销毁它。

如果您需要能够从 handleChange() 中访问 this，您需要将该方法绑定(bind)到组件的上下文。以下是不会对性能产生任何负面影响的方法。

Vanilla ES6 通过构造函数:

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ foo: e.target.value });
    }

    render() {
        return (
            <input
                type="text"
                value={foo}
                onChange={this.handleChange}
            />
        )
    }
}

类属性中的箭头函数(需要带有 transform-class-properties 的 babel):

class MyComponent extends React.Component {
    handleChange = (e) => {
        this.setState({ foo: e.target.value });
    }

    render() {
        return (
            <input
                type="text"
                value={foo}
                onChange={this.handleChange}
            />
        )
    }
}

装饰类方法(需要带有 transform-decorators-legacy 和 core-decorators 的 babel):

import { autobind } from 'core-decorators'

class MyComponent extends React.Component {

    @autobind
    handleChange(e) {
        this.setState({ foo: e.target.value });
    }

    render() {
        return (
            <input
                type="text"
                value={foo}
                onChange={this.handleChange}
            />
        )
    }
}

希望这对您有所帮助!