React 性能：匿名函数 vs 命名函数 vs 方法

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 组件的 Render 块中引用函数的正确方法。

为什么？

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

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

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}
            />
        )
    }
}

希望这会有所帮助！

Answer 2

第三个选项是最好的。您希望避免在 render 函数中设置状态 setState({})，因为它不再是“纯”的。这是人们在谈论functional programming 时使用的术语。这基本上意味着没有副作用。即使您没有在渲染函数中立即使用 setState 调用这些函数，我认为仍然最好将这个逻辑拉到外面并养成考虑纯函数的习惯。

Pure Functions 纯函数是一个函数，它： 给定相同的输入，将始终返回相同的输出。 不会产生副作用。 不依赖于外部可变状态。

同时考虑性能，每次渲染函数运行时，您都会创建一个新函数。您只需要创建一次这些函数，因此最好将它们拉到外面。

渲染函数多久运行一次？可能很多！每次更改状态或从父组件传递新道具时。