React：使用返回的 JSX 中的值在功能组件 VS 中声明变量

Question

Is there any kind of performance difference between the following pieces of code? (Note: These are very simple examples):

const FunctionalComponent = props => {
  const a = <span>Hello World</span>;
  return (
    <h1>
      {a} {props.counter}
    </h1>
  );
};

const FunctionalComponent = props => {
  return (
    <h1>
      <span>Hello World</span> {props.counter}
    </h1>
  );
};

I can't seem to find a straight answer on figuring out if there's any kind of performance difference between declaring a variable like this in a functional component VS directly using the value inside the returned JSX (even if it's just a small performance difference).

Answer 1

Well, the second snippet of code should be the more efficient one to use.

The straight forward answer is that there's a direct correlation between the size of a downloaded script and the performance on the client-side.

Obviously as you said, this is just a simple example and the effect of declaring one extra variable will be negligible. However, as you add more variables there will be a slightly reduced performance since additional memory allocation and fetching happens.

Fetching occurs when you use the variable after you declare it. Somewhere on the low level processing of your script the value of your a const will have to be fetched from memory every time you use it. In your example, instead of just adding <span>Hello World</span> to your dom, you're fetching <span>Hello World</span> from memory (since its stored in a variable). And then it's added to the dom.

Memory allocation simply refers to the act of creating the const and storing its value in memory.

To sum it all up: Instead of the functional component just returning elements that will be added to the dom, the functional component is storing a constant, fetching the value of the constant and then returning the dom elements. On a larger scale there could be significant performance loss as a result of this.