什么原因导致重新渲染？以及如何避免

Question

在使用反应， Redux 和 Hooks 的实现中遇到了一些麻烦。

我不知道如何避免这种情况：

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import * as R from "ramda";

function Main() {
  const mainBanners = useSelector(state => state.mainBanners);
  const features = useSelector(state => state.features);
  const banners = useSelector(state => state.banners);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMainBanners());
    dispatch(fetchFeatures());
    dispatch(fetchBanner());
  }, [dispatch]);

  console.log(features);

  return (
    <div className="Main">
      {R.isEmpty(mainBanners || features) ? (
        <p>Loading...</p>
      ) : (
        <MainBanner mainBanners={mainBanners} features={features} />
      )}

      <Banners banners={banners} />
    </div>
  );
}

export default Main;

此示例的结果console.log如下：

Answer 1

您有三个不同的useSelector调用，并且您正在为三个不同的数据集执行访存。所以是的，我希望这将导致总共四个单独的渲染：

1. 初始渲染
2. 获取mainBanners之后的渲染
3. 获取features之后的渲染
4. 获取banners之后的渲染

这既可以根据您编写的代码来预期，也可以很好地实现，因为您的组件可能希望在发生任何更改时呈现不同的内容。