javascript - 为什么我的组件在没有严格模式的情况下渲染两次？

Question

我想寻求一些帮助，我不知道这是否正常。有这个组件，一个是获取数据的容器，第二个是接收数据并将其显示在 div 中的容器。没什么特别的。

const ProjectContainer = () => { // component
  const projects = useSelector((state) => state.projectReducer.projects);
  const count = useSelector((state) => state.projectReducer.count);
  const isDarkMode = useSelector((state) => state.themeReducer.isDarkMode);
  const [isLoading, setIsLoading] = useState(false);
  const limit = 5;
  const dispatch = useDispatch();

  useEffect(() => {
    console.log("INSIDE USEFFECT");
    if (projects.length > 0) return; // avoid fetching data if the state has data already
    async function getData() {
      setIsLoading(true);
      try {
        const projectsCollectionRef = db.collection("project-collection");
        const projectsCountRef = db
          .collection("aggregation")
          .doc("project-collection");
        console.log("FETCHING DATA");
        const responseCount = await projectsCountRef.get();
        const count = await responseCount.data().count;
        //dispatch
        dispatch({ type: "SET_PROJECTS_COUNT", payload: count });
        const response = await projectsCollectionRef
          .orderBy("createdAt")
          .limit(limit)
          .get();
        let dataSend = [];
        response.forEach((document) => {
          dataSend.push({ ...document.data(), uid: document.id });
        });
        //dispatch
        dispatch({ type: "SET_PROJECTS", payload: dataSend });
        setIsLoading(false);
      } catch (error) {
        console.error(error);
      }
    }
    getData();
  }, [dispatch, projects.length]);
  return (
    <div className="container mx-auto text-center">
      <div>
        Proyectos
      </div>
      {isLoading && projects.length === 0 ? (
        <div >
          <div id="title">
            <p>
              Cargando....
            </p>
          </div>
        </div>
      ) : (
        <>
          {projects.length === 0 ? (
            <div >
              <div id="title" >
                <p>
                  No hay proyectos que mostrar....                 
                </p>
              </div>
            </div>
          ) : (
            <>
              <div >
                {projects.map((project, index) => {
                  return (
                    <Project data={project} index={index} key={project.uid} />
                  );
                })}
              </div>
              {count !== projects.length && (
                <button>
                  Cargar más
                </button>
              )}
            </>
          )}
        </>
      )}
    </div>
  );
};

export default ProjectContainer;

显示数据的组件是这样的

import React from "react";
import { useSelector } from "react-redux";

const Project = (props) => {
  const { data, index } = props;
  console.log({ index });
  const isDarkMode = useSelector((state) => state.themeReducer.isDarkMode);
  return (
    <div>
      <div id="image">
        <div>
          <img
            src={data.imageURL}
            alt=""
           />
        </div>
      </div>
      <div id="textblock">
        <h1 >
          {data.name}
        </h1>
        <div id="description">
          <span >{data.description}</span>
          <div >
            <p>
              Tecnologías
            </p>
            {data.technologies.map((technology) => {
              return (
                <span key={technology}>
                  {technology}
                </span>
              );
            })}
          </div>
          <div >
            <div >
              <span>
                Api Utilizada:
              </span>
            </div>
            <div >
              <span>
                {data.usedAPI}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Project;

我的意思是，它有效，它完成了它的工作，但我不知道它是否正确，在更现实的公司工作中它应该像这样工作吗？

我读到 Strict mode can force to do some rerenders，但我检查了一下，没有。

在终端控制台看起来像这样..

提前感谢大家:)

Answer 1

React 将为每个 dispatch 重新渲染一次，即使在同一个周期中调用了多个 dispatch 函数。这篇文章有一些很好的信息: https://medium.com/unsplash/react-redux-performance-considerations-when-dispatching-multiple-actions-5162047bf8a6

幸好有解决办法:Redux提供的batch函数: https://react-redux.js.org/api/batch

只需从 batch 中调用您的两个 dispatch 调用，您应该会看到它只重新呈现一次。