React - 重新渲染道具更改/动态更改 css 而无需重新渲染

Question

我需要在显示/隐藏导航时隐藏 React 应用程序上的页面内容。为此，我们将一个 prop 传递给组件，并像这样处理样式化组件中的显示 css：<PageContent isOpen={isOpen}>const PageContent = styled.div`   display: ${props => (props.isOpen ? 'none' : 'block')}; `;虽然这工作正常，但当 prop 更改时，内页内容会重新呈现，这是预期的但不是期望的。在这种情况下，页面内容包括一些从 API 获取的内容，因此每次打开/关闭导航时，我们都会再次呈现内容并再次从 API 获取不需要的内容。有没有办法动态控制隐藏/显示主要内容持有者，而无需每次都重新渲染？或者我们应该更多地关注执行获取而不是更新它的组件？

Answer 1

将组件 css 更改为显示隐藏应该只会在视觉上隐藏它，但组件仍应挂载在 DOM 树上。

也许你的 API 获取是在每次重新渲染时发生的，而它应该只在组件安装时发生。

Answer 2

这正是预期的行为，您可以做的不是使用 CSS 隐藏组件，而是返回并清空 Fragment，如果“isOpen”为真，则阻止 API 调用，如果这些调用来自内部组件

 <>
 </>

如果可能的话

Answer 3

我最终将不关心 parent 道具的主要内容包装在PureComponent.

React 的 PureComponent 对组件的 props 和 state 进行了浅层比较。如果什么都没有改变，它会阻止组件的重新渲染。如果发生了变化，它会重新渲染组件。

Answer 4

每次组件触发状态更改时，即使子组件不依赖于该状态，它的子组件也会重新渲染。要解决此问题，您需要将子组件包装React.memo为功能组件或PureComponent用于类组件。这将检查道具变化并重新渲染孩子。

这里有一个组件在挂载上获取数据的示例，并有一个触发状态的按钮click：代码

import React, { useState, useEffect } from "react";

import "./styles.css";

import MyData from "./MyData";

const fakePromise = () =>

  new Promise((resolve) => {

    setTimeout(() => {

      resolve("data returned");

    }, 2000);

  });

export default function App() {

  const [hidden, setHidden] = useState(false);

  const [data, setData] = useState();

  useEffect(() => {

    const fetchData = async () => {

      try {

        const data = await fakePromise();

        setData(data);

      } catch (error) {

        throw error;

      }

    };

    fetchData();

  }, []);

  return (

    <div className="App">

      <div style={{ display: hidden ? "none" : "block" }}>I am visible</div>

      <button onClick={() => setHidden(!hidden)}>Toggle Visiblity</button>

      {data && <MyData data={data} />}

    </div>

  );

}

在示例中，您可以看到MyData组件不依赖隐藏状态，但如果我们不将其包装在React.memo.

我的数据.js

import React from "react";

const MyData = ({ data }) => {

  console.log("render");

  return (

    <div>

      <h1>{data}</h1>

    </div>

  );

};

//export default MyData;

export default React.memo(MyData);

注意：React.memo比较当前道具和下一个道具，如果其中一些道具是函数或静态数据，则array/object每次组件重新渲染时将重新创建这些道具，这将重新渲染孩子，因此您需要使用useCallback或之类的钩子来记住这些道具useMemo。

谢谢希望这能回答你的问题。