本文介绍了呈现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的函数与在另一个组件中声明组件的函数有什么不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!