假设我有一个带有很长返回语句的组件。
const LongReturnComponent = () => {
//lots of state
return (
.
.
.
.
.
.
.
.
)
}
然后,出于可读性的目的,我将其重构为该组件体内更小的函数
const RefactoredComponent = () => {
//lots of state
const function1 = () => {
.
.
}
const function2 = () => {
.
.
}
return (
<>
{function1()}
{function2()}
.
.
</>
)
}
如果我将 function1 和 function2 提取到单独的 React 组件中,是否会有性能提升,或者更确切地说,这是标准做法? React 是否区分编写在组件主体内的组件和单独的组件?我的直觉是肯定的,但这是否是一个重大改进?
阻碍我这样做的是,我必须将大约 20 个状态变量传递给子组件,并且还要对 props 进行注释,这样很快就会变得混乱
如果我将 function1 和 function2 提取到单独的 React 组件中,是否会有性能提升
它有潜力提高性能,但不会自动实现。通过将其拆分为单独的组件,您也许可以跳过渲染一些未更改的组件。
例如,您可以将子组件之一包装在 React.memo 中。这样,即使父级需要重新渲染,子级也可以跳过渲染,从而提高性能。
或者,如果您当前的组合组件正在从上下文访问某些值,并且您可以使其只有子组件需要该值,那么当该值发生变化时,父组件可能能够跳过渲染。
或者更确切地说,这是标准做法吗?
拆分组件是很常见的事情,但何时进行拆分取决于实现的细节。有时您可以像我提到的那样获得性能改进,有时却不能,因为无论如何一切都必须渲染。
即使无法提高性能,您也应该考虑拆分组件以使代码更易于理解。拥有单独的组件可以明确哪些代码与哪些代码相关,并且可以帮助心理分块。
React 是否区分编写在组件主体内的组件和单独的组件?
我想区分的一件事是:不要在另一个组件的主体内部定义组件,这一点非常重要。您当前的示例没有这样做;它正在创建函数,但它从不像组件一样使用这些函数。
换句话说,即使不常见,以下操作也能正常工作:
const RefactoredComponent = () => {
const function1 = () => {
.
.
}
return (
<>
{function1()}
但这将是一个问题:
const RefactoredComponent = () => {
const Function1 = () => {
.
.
}
return (
<>
<Function1/>
如果您执行后者,则 React 必须在每次渲染时卸载/重新安装 Function1。这会对性能造成很小的影响,但更重要的是,它将重置每个渲染的焦点和状态。您必须将组件移到外面。
const Function1 = () => {
.
.
}
const RefactoredComponent = () => {
return (
<>
<Function1/>