React 节点和 JSX 元素在父组件中作为 const ？

Question

如果我们的组件中有很多 JSX 代码，是否可以将其中一些代码分配给 const，或者我们应该始终创建新组件并重用它们？我将在这里发布一些简单的例子。

示例 1，带有 const 和内部 JSX 元素：

export const ParentComponent = () => {
    const [count, setCount] = useState(0);

    const ChildNode = (
      <div>Hello World</div>
    );

    return (
     <div>
        {ChildNode}
        <button onClick={() => setCount(count + 1)}>Count me</button>
     </div>
    );
};

示例2，单独组件：

const ChildComponent = () => <div>Hello World</div>;

export const ParentComponent = () => {
    const [count, setCount] = useState(0);

    return (
     <div>
        <ChildComponent />
        <button onClick={() => setCount(count + 1)}>Count me</button>
     </div>
    );
};

我知道在父组件中声明子组件不好，而且我们会搞乱 React 渲染，但这也适用于简单的 JSX 元素？

Answer 1

但这也适用于简单的 JSX 元素？

没有。

在代码审查中，我们可能会说不要使用 PascalCase 命名变量：

    const childNode = (
      <div>Hello World</div>
    );

我知道这个例子是人为的，但是

1. 如果子节点太小，直接在return中声明即可：

    return (
     <div>
        <div>Hello World</div>
        <button onClick={() => setCount(count + 1)}>Count me</button>
     </div>
    );

2. 如果子节点很大，你应该创建一个新组件并传递 props

const renderSomething = () => /* some long block of jsx */

return (
  <div>
   {renderSomething()}
   ...some other jsx
 </div>
)

是一种反模式 - 因为这些

renderXXX

函数往往会随着时间的推移而增长并变得笨拙且难以遵循