本文介绍了呈现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中创建项目组件(如下所示)相比,呈现这样的项目有什么不同:

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>
    );
}

编辑:

如何在本地创建只调用一次的组件/呈现函数?

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

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

推荐答案

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

// #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)和函数组件(Item)。

您想要什么

相反,您希望让Reaction执行Reconciliation进程,因此您需要尽可能多地呈现静电树。

最简单的解决方案是将函数/函数组件移动到外部作用域或将逻辑内联到树本身。

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>
  );
}

renderItem只是一个返回JSX的函数,Item是一个反应组件,因此其状态被注册到反应树(&q;只是一个函数&不能保持自己的状态)。

这篇关于呈现JSX的函数与在另一个组件中声明组件的函数有什么不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-17 08:51
查看更多