每次使用组件时，是否在 React 组件中重新评估定义的辅助函数？

Question

假设我有一个如下所示的 React 组件：

const MyReactComponent = (props) => {
  const my_function = () => {// do some stuff...}

  return (
    <div>
      <p>
        Hello {props.name}, would you like to eat a {my_function()}?
      </p>
    </div>
  )
}

代码定义my_function是否会在每次使用My_React_Component时重新计算？（“使用”是指“出现在 JSX 中。”）

Answer 1

你是说二手还是re-rendered?

如果您指的是二手：是的，每个组件都作为它自己的实例，因此每次调用函数或最初渲染组件时都会执行这些方法（如果在渲染时使用），但是如果您在 DOM 上多次使用该组件，它只写一次脚本。 DOM 的那部分标记是重复的，但脚本不是。

Answer 2

只初始化时，也许可以使用

React.useEffect(() => {
  const my_function = () => {console.log('my_function')}
  my_function();
}, [])

Answer 3

是的。有点。也许没有。

执行 javascript 函数时，函数中的每一行都将得到 executed/evaluated。因此，每次调用您的函数时，都会再次评估函数定义。由于您使用的是函数组件，所以是的，不仅每次使用组件时都会重新定义函数，而且每次使用组件时都会重新定义函数 re-rendered.

但是，是不是意味着javascript每次定义函数都要重新编译呢？可能是。理论上javascript不需要重新编译函数。它只需要创建一个新的闭包。理论上你不需要重新编译一个函数来创建一个新的闭包——你只需要一个函数栈帧的副本。由于 Netscape4 之后的激烈竞争，大多数 javascript 解释器已经优化到几乎没有现代 javascript 解释器会再次重新编译内部函数的程度。所以函数定义中最慢的部分只发生一次。

不过，从理论上讲，这仍然使 class-based 组件相对于函数组件有一个小优势：函数定义不需要在每次渲染时再次计算。实际上，性能差异非常小。

如果您真的坚持避免重新评估函数定义，您总是可以在组件外部声明它。这肯定只会评估该功能一次。但是，您不能使用闭包与函数共享变量，但这不是什么大问题，因为您始终可以将变量传递给函数。由于无法共享闭包，在组件外部声明函数也鼓励您编写纯函数：

const my_function = (propsArgs) => {// do some stuff...}

const MyReactComponent = (props) => {

  return (
    <div>
      <p>
        Hello {props.name}, would you like to eat a {my_function(props)}?
      </p>
    </div>
  )
}

每次使用组件时，是否在 React 组件中重新评估定义的辅助函数？

Are helper functions defined inside a React component re-evaluated every time the component is used?

javascript

optimization

scope

lazy-evaluation

reactjs