Question

我有以下代码

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

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

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

我只想知道在“ render（）”之前声明一个函数与在Render内部声明一个函数之间的区别是什么？当我需要在外部和内部声明函数时，有什么特殊的情况吗？我是React的新手，所以想知道在声明函数时的最佳实践是什么。

TIA

Answer 1

请记住，每次渲染组件时，render方法中的所有内容都会一次又一次地运行。对于您而言，最好不要将browserClick函数保留在render方法之外。

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

Answer 2

外部声明（例如您的代码）将对函数进行静态处理，如果将其作为属性传递给子组件（从PureComponent扩展），则不会导致子组件呈现。在声明内部，您将在每次调用render时将不同的函数句柄传递给子组件。

Answer 3

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

如果您的render方法内部有函数声明或变量声明，则将在每个渲染器上连续重新创建它。

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

以下是您可以自己查看的测试：https://jsperf.com/inner-function-vs-global-function

为了安全起见，建议您在render函数内部仅包含绝对必要的内容。如果不是为了提高性能，则至少可以使您的代码更整洁，更易于编写。

Answer 4

除了在render()方法中初始化组件时每次组件渲染时都会声明它外，我认为它与您声明的变量/函数的范围有关。

如果您在类声明之外声明它，则它将成为全局变量/函数，而无法访问该类的this属性（包括this.props和/或this.state），除非您传递一些东西作为参数。最好的方法可能是将其放在类中，但在渲染器之外，然后使用this.browserClick进行调用。最后，您应该使用任何适合您的需求。

功能放置最佳实践

4 个答案: