我有一个这样的组件:
const Foo = () => (
<div>
<h1>Hello world!</h1>
</div>
)
请注意,它不需要任何 Prop ;它在每次渲染时返回相同的 JSX这可以用作常量而不是函数吗?
const Foo = (
<div>
<h1>Hello world!</h1>
</div>
)
或者 React 在重复使用完全相同的内容时会遇到问题 React.createElement()
在整个应用程序的不同 DOM 上下文中重新渲染和 - 更有可能 - 结果?const OtherComponent = ({ ... }) => (
<div>
{Foo}
{...}
</div>
)
const OtherOtherComponent = ({ ... }) => (
<span>
{Foo}
</span>
)
编辑:我想到,在子组件中调用的任何钩子(Hook)都可能会被这个搞砸,所以这可能是一个坏主意。编辑 2:忽略第一个“编辑”;我对其进行了测试,并惊讶地发现隐藏在 const react-node 下的钩子(Hook)实际上确实被多次调用。我倾向于认为这确实是安全的,但仍然希望得到更熟悉 React 内部结构的人的确认。
最佳答案
这只是javascript。在第一种情况下,您创建一个对象,如果您一次又一次地使用它,它的引用不会改变。
在另一种情况下,它是一个函数,每次调用它时,都会返回一个新的实例/对象。
同样的示范,
const Comp1 = <div>Comp 1</div>;
const Comp2 = () => {
console.log('rendering comp 2' + Math.random());
return <div>Comp 2</div>;
};
export default function App() {
const obj1 = Comp1;
const obj2 = Comp1;
const obj3 = Comp1;
console.log(Object.is(obj1, Comp1));
console.log(Object.is(obj1, obj2));
console.log(Object.is(obj2, Comp1));
console.log(Object.is(obj2, obj3));
return (
<div>
{obj1}
{obj2}
{obj3}
<Comp2/>
<Comp2/>
<Comp2/>
</div>
);
}
关于javascript - 你能在不同的渲染和上下文中重用 React 元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68959747/