我的目标是实现这样的功能，例如根据子链接的展开/折叠来更改页面的背景渐变。为此，我使用了 useContext 钩子，但我注意到即使一切都按预期工作，背景渐变确实发生了变化，但它需要大约 20 秒才能重新呈现折叠/展开的子链接。我只看到一个关于 SO 的问题，但我真的不明白如何解决它。问题是上下文提供者的所有子级都会因为上下文中的状态改变而被重新渲染。 我会上传一个代码和框示例，但我被要求不要上传，所以这里是最可重现的代码片段。我如何使用该功能并防止孩子重新渲染，以便一切运行得更快？请帮助:)

const Wrapper = styled('div')<{linksExpanded : boolean}>`
  background-image: linear-gradient(180deg,pink 0.2%,#FFFFFF 3%);
  background-color: white;
  ${({theme})=>theme.breakpoints.up('md')} {
    background-image: linear-gradient(180deg,pink 1.5%,#FFFFFF 5.5%);
  }
  ${({linksExpanded,theme})=>linksExpanded && `
    background-image: linear-gradient(180deg,pink 2.5%,#FFFFFF 4.25%);
    ${theme.breakpoints.up('md')} {
      background-image: linear-gradient(180deg,pink 6.5%,#FFFFFF 10%);
    }
  `}
`

const Home = () =>
{
  const { linksExpanded } = useContext(HomeDataContext);
  return (
            <Wrapper linksExpanded={linksExpanded}>
              <About />
              <Links />
              <Contacts />
              <Gallery />
            </Wrapper>
  );
};

export default Home;

export const Landing: FC = () => <PageSkeleton
        pageContent={
          <HomeDataContextProvider><Home /></HomeDataContextProvider>}
      />;


const Links = () => {
  const { currentCakes,linksExpanded,setLinksExpanded } = useContext(HomeDataContext);
  const renderLinks = () => (
    <S.List style={{maxHeight: !linksExpanded ? '0px' : '1000px'}}>
      {currentCakes.map((el: CakeDescription,key : number) => (
        <li key={el.name}>
          <a href='https://google.com'>Link</a>
        </li>
      ))}
    </S.List>
  );
  const handleLinksExpand = () => {
    setLinksExpanded(!linksExpanded);
  };
  return (
    <S.Container>
        <S.ExpandableLinkContainer>
          <ExpandableLink
            onClick={handleLinksExpand}
            open={linksExpanded}
            title='Cakes'
          />
        </S.ExpandableLinkContainer>
        {renderLinks()}
    </S.Container>
  );
};
export default Links;

最后的上下文：

export type HomeDataState = {
  currentCakes: Array<CakeDescription>;
  setCurrentCakes?: any;
  linksExpanded: boolean;
  setLinksExpanded?: any;
};

const initialValue: HomeDataState = {
  currentCakes: [],linksExpanded: false,};

export const HomeDataContext = createContext(initialValue as HomeDataState);

export const HomeDataContextProvider: FC = ({ children }) => {
  const [linksExpanded,setLinksExpanded] = useState(initialValue.linksExpanded);
  const [currentCakes,setCurrentCakes] = useState<CakeDescription[]>(initialValue.cakes);
  const fetchCakes = async () => {
    setCurrCakes(
      await myAxiosConstruct.get(process.env.api);
    );
  };
  useEffect(() => {
    fetchCakes();
  },[]);
  
  return (
    <HomeDataContext.Provider
      value={{
        currentCakes,setLinksExpanded,}}
    >
      {children}
    </HomeDataContext.Provider>
  );
};