仅更改类的 React 组件重新渲染

Question

我对 React 还比较陌生，对于每次状态改变时重新渲染组件这个东西还没有完全熟悉。 我知道重新渲染使声明性组件成为可能，但就性能而言，它似乎不太理想，而且我很难确定何时避免组件重新渲染。

假设我有一个渲染成本高昂的组件

RenderCostlyComponent

，其状态为

loading

，该组件向其应用一个类以显示加载正在进行中。

function RenderCostlyComponent(props) {

    const [loading, setLoading] = useState(true);
    const [componentData, setComponentData] = useState({});

    //Data retrieval or calculation and store in 'componentData' data state

    return (
        <div className={loading ? 'loadingClass' : ''}>
            {/*Comoponent layout here*/}
        </div>
    );

}

在这种情况下，只是为了更改类（或在应用最小更改的其他情况下），组件需要重新渲染。当然，没有数据发生变化，所以 React 不会重建繁重的 DOM 部分，特别是如果我们一直在使用与记忆相关的钩子。

但是这种方法是否实用且已准备好投入生产，或者这应该被视为一种不好的做法？

Answer 1

虽然问题有点不清楚，但是react重新渲染过程是一个相当强大的功能，大多数情况下它对性能的影响可以忽略不计。但是，如果你想优化代码更多考虑：

1. 使用React.memo，它是一个高阶组件，可以在react中制作一个纯组件。
2. 使用 useMemo 和 useCallback 钩子将有助于记住 js 函数的值。

React 协调过程非常高效，因此重新渲染是实用且可用于生产的方法。