面试题：React复杂场景下if - else条件渲染的优化

Question

在一个包含多个状态和复杂业务逻辑的React应用中，有多个组件需要根据不同的条件进行渲染。目前使用了大量的if - else语句导致代码冗长且难以维护。请描述你会如何优化这种条件渲染逻辑，并且给出具体的代码示例，说明如何将条件逻辑提取和复用。

Answer 1

1. 使用函数来提取条件逻辑

将重复的条件逻辑提取到单独的函数中，这样可以提高代码的复用性和可读性。

import React from'react';

// 提取条件逻辑到函数
const shouldRenderComponentA = (condition1, condition2) => {
    return condition1 && condition2;
};

const shouldRenderComponentB = (condition3) => {
    return!condition3;
};

const App = ({ condition1, condition2, condition3 }) => {
    return (
        <div>
            {shouldRenderComponentA(condition1, condition2) && <ComponentA />}
            {shouldRenderComponentB(condition3) && <ComponentB />}
        </div>
    );
};

const ComponentA = () => <div>Component A</div>;
const ComponentB = () => <div>Component B</div>;

export default App;

2. 使用对象映射来简化条件渲染

当条件渲染的情况较多时，可以使用对象映射来替代大量的if - else语句。

import React from'react';

const conditionMap = {
    condition1: <ComponentA />,
    condition2: <ComponentB />,
    condition3: <ComponentC />
};

const App = ({ currentCondition }) => {
    return <div>{conditionMap[currentCondition]}</div>;
};

const ComponentA = () => <div>Component A</div>;
const ComponentB = () => <div>Component B</div>;
const ComponentC = () => <div>Component C</div>;

export default App;

3. 使用高阶组件（HOC）

高阶组件可以在不改变组件内部逻辑的情况下，为组件添加额外的功能，包括条件渲染逻辑。

import React from'react';

// 高阶组件
const withConditionalRender = (condition, ComponentToRender) => {
    return (props) => {
        return condition(props)? <ComponentToRender {...props} /> : null;
    };
};

const shouldRenderComponentD = (props) => {
    return props.someCondition;
};

const ComponentD = (props) => <div>Component D</div>;

const ConditionalComponentD = withConditionalRender(shouldRenderComponentD, ComponentD);

const App = ({ someCondition }) => {
    return (
        <div>
            <ConditionalComponentD someCondition={someCondition} />
        </div>
    );
};

export default App;

通过以上几种方法，可以有效地优化React应用中复杂的条件渲染逻辑，使代码更加简洁、可维护和可复用。