面试题：React高阶组件条件渲染下的性能优化

Question

在React高阶组件进行条件渲染时，可能会遇到性能问题，尤其是在频繁触发条件判断的场景下。请分析可能出现性能问题的原因，并阐述至少两种优化策略，同时结合代码示例说明如何在实际项目中应用这些策略。

Answer 1

性能问题原因分析

1. 不必要的重新渲染：高阶组件通常会返回一个新的组件，每次条件变化时，即使子组件的props没有改变，也可能导致整个高阶组件包裹的组件树重新渲染。这是因为React默认会根据组件引用的变化来决定是否重新渲染。例如：

import React from'react';

const withCondition = (condition) => (WrappedComponent) => {
    return (props) => {
        return condition? <WrappedComponent {...props} /> : null;
    };
};

const MyComponent = () => {
    return <div>My Component</div>;
};

const ConditionalComponent = withCondition(true)(MyComponent);

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

export default App;

在上述代码中，如果condition频繁变化，ConditionalComponent会频繁重新渲染，即使MyComponent的props没有改变。 2. 函数创建开销：每次渲染高阶组件返回的函数都会创建新的实例，这在频繁渲染时会带来额外的性能开销。如上述withCondition返回的函数，每次condition变化都会创建新的函数实例。

优化策略及代码示例

1. 使用React.memo：
   • 策略阐述：React.memo是一个高阶组件，它可以对函数组件进行浅比较，只有当props发生变化时才会重新渲染。可以将被高阶组件包裹的组件用React.memo包裹，减少不必要的重新渲染。
   • 代码示例：

import React from'react';

const withCondition = (condition) => (WrappedComponent) => {
    return (props) => {
        return condition? <WrappedComponent {...props} /> : null;
    };
};

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

const ConditionalComponent = withCondition(true)(MyComponent);

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

export default App;

在这个例子中，MyComponent被React.memo包裹，只有当MyComponent的props变化时，它才会重新渲染，即使withCondition中的condition变化导致ConditionalComponent重新渲染，只要MyComponent的props不变，MyComponent就不会重新渲染。 2. 缓存高阶组件返回结果：

• 策略阐述：可以通过缓存高阶组件返回的结果，避免每次条件变化都重新创建新的组件。可以使用一个对象来存储不同条件下的高阶组件返回结果。
• 代码示例：

import React from'react';

const conditionCache = {};

const withCondition = (condition) => (WrappedComponent) => {
    if (!conditionCache[condition]) {
        conditionCache[condition] = (props) => {
            return condition? <WrappedComponent {...props} /> : null;
        };
    }
    return conditionCache[condition];
};

const MyComponent = () => {
    return <div>My Component</div>;
};

const ConditionalComponent = withCondition(true)(MyComponent);

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

export default App;

在上述代码中，conditionCache对象缓存了不同condition下withCondition返回的组件。当condition不变时，直接从缓存中获取组件，避免了重复创建新的函数组件，从而提高性能。