函数放置的最佳实践

Question

我有以下代码

 browserClick = () => {
    console.log("test");
  };

  constructor() {
    super();
    this.state = {};
  }
  render() {

    const browserClick = () => {
      console.log("test");
    };

我只想知道在" Render ()“之前声明一个函数和在Render()中声明一个函数有什么区别。当我需要在外部和内部声明一个函数时，有没有什么特殊的场景？我是个新手，所以我想知道声明函数时的最佳实践是什么。

提亚

Answer 1

请记住，每次呈现组件时，render方法中的所有内容都将一次又一次地运行。在您的示例中，最好将browserClick函数留在render方法之外。

在render方法中创建函数的一个场景是，当您需要在某个值上创建闭包时。例如，如果您在一个数组上进行映射，并且您需要您的函数能够访问该数组中每个元素的索引。在这种情况下，您可能会为每个元素创建一个内联函数。

Answer 2

在外部声明，例如您的代码，将生成函数的静态句柄，如果您将其作为属性传递给子组件(从PureComponent扩展)，它将不会导致子组件呈现。在声明中，您将在每次呈现调用中将不同的函数句柄传递给子组件。

Answer 3

每次组件重新呈现时，它都会调用您的render方法。

如果您的render方法中有一个函数声明或变量声明，它将在每次呈现时不断地重新创建。

也就是说，在现代Javascript引擎上，性能影响很可能是最小的，如果不是可以忽略的话。

下面是一个测试，您可以运行它来亲自查看：https://jsperf.com/inner-function-vs-global-function

为了安全起见，我建议在render函数中只包含绝对必要的内容。如果不是为了提高性能，它至少会让你的代码更整洁，更容易创作。