Question

当显示/隐藏导航时，我需要在React Application上隐藏页面内容。

为此，我们将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

这完全是一种预期的行为，如果“ isOpen”为true，则不使用CSS隐藏组件，而是返回并清空Fragment，以防止API调用（如果这些调用来自内部组件< / p>

 <>
 </>

如果可能

Answer 3

我最终将与父道具无关的主要内容包装在PureComponent中。

React的PureComponent对组件的属性和状态进行了浅浅的比较。如果什么都没有改变，它将阻止组件的重新呈现。如果有更改，它将重新提供组件。

Answer 4

每次组件触发状态更改时，即使子组件未在该状态上中继，它的所有子组件也会重新呈现。要解决此问题，您需要使用功能性Component的React.memo包装子Component或使用类类组件的PureComponent。这将检查道具是否更改并重新渲染孩子。

这里是一个组件在安装时获取数据并具有一个按钮的示例，该按钮触发click上的状态：code

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中，它将重新呈现。

MyData.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之类的钩子来记录那些道具。

感谢希望能回答您的问题。

反应-道具更改时渲染/动态更改CSS而不渲染

4 个答案: