reactjs - 防止简单react组件之间替换引起的重新渲染

Question

function A() {
  return <HeavyComponent someProp={true} />;
}

function B() {
  return <HeavyComponent someProp={false} />;
}

function C() {
  const [state, setState] = useState(true);
  return state ? <A /> : <B />;
}

function D() {
  const [state, setState] = useState(true);
  return state ? A() : B();
}

如您所见，A 和B 完成的工作非常简单。当C中的state由true变为false时，react会移除A中的元素code> 已呈现并安装新的 B 呈现器。这会导致 HeavyComponent 从头开始​​渲染。

如果我使用 D 而不是 C，结果将完全相同。然而。渲染会更高效，因为 D 将更新 HeavyComponent 而不是 remove-and-render-new-one .

问题是我想在库中导出 A 和 B 并且很难指望其他程序员使用 A 和B 以类似 D 的高效方式。

我想您可以指出我不需要定义A 和B。但这只是一个简化的例子。在实际实践中，我有不止一个 Prop 和更多组件。每个组件都代表通过自身名称传递给 HeavyComponent 的 Prop 组合的语义。我还将直接导出 HeavyComponent，但用户会在第一时间对其 props 感到困惑。所以最好导出方便的组件 A 和 B。

有什么方法可以使 A 和 B 像在 D 中一样工作，即使程序员像在 C 中那样使用它们?

Answer 1

您的意思可能是重新挂载，而不是重新渲染。答案是你不能，而不是在使用 C 时。

并且对于 D，A 和 B 不能再处理状态和效果；使它们更像是一个实用函数而不是组件。

你可以做的是导出一个自定义钩子(Hook)来返回要传播到 <HeavyComponent> 中的默认 Prop 。

function E() {
    const [state, setState] = useState(false)
    const aProps = useA()
    const bProps = useB()
    const props = state ? aProps : bProps

    return <HeavyComponent {...props} />
}

当然你不必使用钩子(Hook)(你可以只使用一个常规函数)但这使你能够包含状态和效果，就好像它是一个完整的<A>组件本身，无需卸载和重新安装。