在 React 循环中使用组件函数

Question

I heard that () is not good at the rendering performance so it should not be used. However, in this case, it can not get the results when passing the function without ().

You can check the reseult in CodeSendbox: Link

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp(), comp];  // Please Attention This Line!
const items = [];

for (const [index, value] of elements.entries()) {
  items.push(
    <div>
      {index}: {value} <br />
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

Result is:

0:
This is Component

1: 

Why only comp() but not comp ? What is the best practice in this case?

Answer 1

comp is an arrow function that returns a JSX literal. It's a "function" that is stored in a variable called comp . When called/invoked as comp() , notice the parenthesis, it is executed and the computed return value is returned in the array. When used without the parenthesis, like comp , this is simply the reference to the variable (that can be invoked like a function).

Functions aren't valid react children nor valid JSX.

Introducing JSX

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp(), comp];  // saves a JSX literal, and a function
const items = [];

for (const [index, value] of elements.entries()) {
  items.push(
    <div>
      {index}: {value} <br /> // trying to render a function here in `value`
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

I assume you got the idea () is "not good at rendering performance" from some documentation about in-line anonymous arrow functions and event handlers and mapping an array of data. That is a different issue altogether. I believe your situation is just a misunderstanding about how arrow functions are invoked.

Answer 2

You can use JSX instead of calling the function:

const comp = () => {
  return <div>This is Component</div>;
};

const elements = [comp, comp];  // Remove the function call, save only the reference
const items = [];

// need to use Value with V instead of v for JSX
for (const [index, Value] of elements.entries()) {
  items.push(
    <div>
      {index}: <Value/> <br /> // render as JSX
    </div>
  );
}

export default function Index() {
  return <>{items}</>;
}

Here's a sandbox link showing how it works: https://codesandbox.io/s/cranky-mclean-7ymzr