Reactjs 调用无状态函数组件时传递子级

因此，我正试图通过将各种组件转换为无状态功能组件来优化我的应用程序，我遇到了一个难题，即当需要渲染

道具时，该怎么做。我的理解是，您需要使用函数调用而不是元素语法，以便看到任何性能提升。我只是想知道下面的方法2是否是正确的方法，或者它可能有任何意想不到的副作用。任何帮助都将不胜感激

const APP = (props) => {
    return <b>{props.children}</b>
};

const child1 = <p>Hello</p>;
const child2 = <p>world</p>;


// method 1 (usual jsx element syntax)
ReactDOM.render(
   <APP>{child1}{child2}</APP>,
   document.getElementById('container')
);

// method 2
ReactDOM.render(
   APP({children: [child1, child2]}),
   document.getElementById('container')
);

const-APP=（道具）=>{
返回{props.children}
};
const child1=你好
；
const child2=世界
；
//方法1（通常的jsx元素语法）
ReactDOM.render(
{child1}{child2}，
document.getElementById（'容器'）
);
//方法2
ReactDOM.render(
APP（{children:[child1，child2]}），
document.getElementById（'容器'）
);
我只会使用方法1。JSX最终只是
React.createElement（）
的语法糖。你可以使用这种实际的方法编写应用程序，但它看起来非常可怕，而且很难维护。我的理解是，上面的第二种方法更有效，因为
React.createElement
不需要调用，因此我希望使用它。我只是想知道这是否是不使用jsx语法的最好方法。@AndrewInterboth是的，你是对的！如果性能是一个真正的问题，我会选择你的第二个选择。但是，其他React开发人员更容易阅读和理解第一个选项。@ChaseDeAnda感谢您的确认！我还没有决定是追求性能还是可读性：）我只会使用方法1。JSX最终只是
React.createElement（）
的语法糖。你可以使用这种实际的方法编写应用程序，但它看起来非常可怕，而且很难维护。我的理解是，上面的第二种方法更有效，因为
React.createElement
不需要调用，因此我希望使用它。我只是想知道这是否是不使用jsx语法的最好方法。@AndrewInterboth是的，你是对的！如果性能是一个真正的问题，我会选择你的第二个选择。但是，其他React开发人员更容易阅读和理解第一个选项。@ChaseDeAnda感谢您的确认！我还没有决定是追求性能还是可读性：）