面试题：React高阶组件与Render Props在性能优化上的考量

Question

在React应用性能优化场景下，分析高阶组件和Render Props在处理相同业务逻辑时，分别会面临哪些性能问题，以及如何针对性地优化？

Answer 1

高阶组件（HOC）性能问题及优化

1. 性能问题
   • 不必要的重渲染：HOC返回的新组件每次props变化时都会重渲染，即便内部逻辑并不依赖这些变化的props。例如，一个HOC用于添加日志功能，被包裹组件仅依赖部分props，但只要父组件传递给HOC的props有变化，整个包裹组件都会重渲染。
   • 嵌套地狱：多个HOC嵌套使用时，会导致组件层级过深，增加渲染成本。比如，一个组件同时使用了用于权限控制、数据加载、日志记录的HOC，嵌套层级增多，性能影响较大。
2. 优化方法
   • 使用React.memo：在HOC内部，对被包裹组件使用React.memo，它会对props进行浅比较，只有props真正变化时才会触发重渲染。例如：

import React from'react';

const withLogging = (WrappedComponent) => {
    return (props) => {
        console.log('Component rendered');
        return <WrappedComponent {...props} />;
    };
};

const MyComponent = React.memo((props) => {
    return <div>{props.value}</div>;
});

export default withLogging(MyComponent);

- **减少嵌套**：尽量合并HOC的功能，避免过多嵌套。例如，可以将权限控制和数据加载的功能合并到一个HOC中，减少组件层级。

Render Props性能问题及优化

1. 性能问题
   • 渲染劫持：每次父组件render时，render prop函数都会被重新创建，导致子组件不必要的重渲染。比如，父组件状态变化，render prop函数被重新创建，即便传递给子组件的实际数据未变，子组件也会重渲染。
   • 函数定义位置：如果render prop函数定义在组件内部，每次组件渲染都会重新创建函数，影响性能。
2. 优化方法
   • 使用React.memo或shouldComponentUpdate：在子组件中使用React.memo（对于函数组件）或shouldComponentUpdate（对于类组件），对传递进来的数据进行比较，只有数据变化时才重渲染。例如：

import React from'react';

const MyProvider = ({ children }) => {
    const data = { value: 1 };
    return children(data);
};

const MyConsumer = React.memo(({ data }) => {
    return <div>{data.value}</div>;
});

const App = () => {
    return (
        <MyProvider>
            {data => <MyConsumer data={data} />}
        </MyProvider>
    );
};

- **将render prop函数定义在组件外部**：这样函数不会在每次组件渲染时重新创建，提升性能。例如：

import React from'react';

const MyProvider = ({ children }) => {
    const data = { value: 1 };
    return children(data);
};

const myRenderPropFunction = (data) => {
    return <div>{data.value}</div>;
};

const App = () => {
    return (
        <MyProvider>
            {myRenderPropFunction}
        </MyProvider>
    );
};