返回方法之外的函数和变量在React中重新创建每个重新渲染吗?

Question

我很好奇你是否可以分别创建一个新的函数和对象，然后重新渲染。比如，为了只有一个，我需要把它完全放在组件之外吗?

例如

const ReactComponentExample = () => {
const exampleFnc = {
return 'name';
};
const styles = { background: 'red' };
return (
<div style={styles}>
<p>Hello</p>
{exampleFnc()}
</div>
);
};

^上面，我在返回方法之外创建了一个fnc和一个对象。

尝试了上面的代码片段，但我不知道足够的网络工具来剖析如果我认为是实际发生的ie;FNC是否新的

Answer 1

每次重新呈现组件时，都会重新创建组件内部声明的函数和变量。但是在组件外部声明的那些不会在每次渲染时重新创建。这是因为它们不是组件的局部状态或道具的一部分。

// example of a function and object created outside of the ReactComponentExample.
const exampleFnc = {
return 'name';
};
const styles = { background: 'red' };
const ReactComponentExample = () => {
return (
<div style={styles}>
<p>Hello</p>
{exampleFnc()}
</div>
);
};