Reactjs 什么'；呈现JSX的函数与在另一个组件中声明组件的函数之间的区别是什么？

这是反模式吗

export function Todo() {
    ...

    const renderItem = (item) => (
        item.done
            ? <strike>{item.text}</strike>
            : <span>{item.text}</span>
    );

    return (
        <ul>
            {items.map((item) => <li>renderItems(item)</li>)}
        </ul>
    );
}

导出函数Todo（）{
...
const renderItem=（项）=>(
项目完成
？{item.text}
：{item.text}
);
返回(

{items.map（（item）=>
renderItems（item）
）}

);
}

这样呈现项与在Todo中创建项组件有什么区别，例如：

export function Todo() {
    ...

    const Item = (props) => (
        props.item.done
            ? <strike>{item.text}</strike>
            : <span>{item.text}</span>
    );

    return (
        <ul>
            {items.map((item) => <li><Item item={item} /></li>)}
        </ul>
    );
}

导出函数Todo（）{
...
常量项目=（道具）=>(
道具。物品。完成
？{item.text}
：{item.text}
);
返回(

{items.map（（item）=>
）}

);
}

编辑：

本地创建一次调用的组件/渲染函数怎么样

export function SomeForm(props) {
    const renderButton = (isComplete) => (
        isComplete
            ? <button>Submit</button>
            : <button disabled>Please complete</button>
    );

    return (
        <form>
            <input />
            {renderButton(props.isDone)}
        </form>
    );
}

导出函数某种形式（道具）{
const renderButton=（isComplete）=>(
完成
提交
：请填写
);
返回(
{renderButton（props.isDone）}
);
}

让我们先将示例修复为有效代码：

// #1
export function Todo({items}) {
  const renderItem = (item) =>
    item.done ? <strike>{item.text}</strike> : <span>{item.text}</span>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{renderItems(item)}</li>
      ))}
    </ul>
  );
}

// #2
export function Todo({items}) {
  const Item = (props) =>
    props.item.done ? <strike>{item.text}</strike> : <span>{item.text}</span>;

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Item item={item} />
        </li>
      ))}
    </ul>
  );
}

---

这样渲染项目有什么区别

---

renderItem

只是一个返回JSX的函数，

Item

是一个React组件，因此它的状态被注册到React树（“just a function”无法保持自己的状态）。

感谢您澄清了“just a function”和React组件之间的区别！我知道这在呈现排序列表时效率特别低，但是如果我只呈现一次什么呢。那么，创建“渲染”函数或本地组件仍然是一种反模式吗？我在编辑中添加了（一个相当做作的）示例。您的编辑都是相同的示例，仍然是反模式的

const renderItem = (item) => (...)
const Item = (props) => (...)

export function Todo({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          (item.done ? <strike>{item.text}</strike>:<span>{item.text}</span>)
        </li>
      ))}
    </ul>
  );
}