Question

以下是我要完成的任务的示例：

 **TheParent.js**
    
    import Child from '/child';
    import Feature from '/feature'
    
    const TheParent = () => {
     const [state, setState] = useState();
    
    return (
       <p>These are my ancestors</p>
       <Child setState={setState} />
       <Feature state={state} />
    );
    }

    export default TheParent;

    **The Child**
   import GrandChild from '/child';
    
    const Child = ({setState}) => {
    
    return (
       <GrandChildChild setState={setState} />
    );
    }

    export default Child;

  **The GrandChild**
    
    const GrandChild = ({setState}) => {
     
    const handleClick = () => {
    setState('newAncestor');
    }

    return (
       <Button onClick={handleClick}>Click Me</Button>
    );
    }

    export default GrandChild;

因此，正如您从这个粗制滥造的示例中看到的，我在 TheParent.js 中设置了一个 useState 钩子。它位于顶部，因此我可以在我正在构建的所有功能中使用“状态”。但是，我需要在应用程序中设置状态的地方是在孙子级别。这是一个问题，因为它会导致我的整个应用程序重新呈现。我已经将 useContext 视为一种解决方案，但这也会导致重新渲染......除非我做了一些我忽略的不正确的事情。我看过各种关于使用 useCallback 和 useMemo 的文章，但我不确定在这种情况下是否会帮助我。所以，我在这里寻求建议并感谢任何建议。提前致谢。

在顶部组件保持状态的同时避免 React Hooks 重新渲染？

0 个答案: