如何将数据从父组件传递到子组件，而无需每次都重新渲染父组件？答案

【问题标题】：how can i pass the data from parent component to child components without re rendering parent every time in react?如何将数据从父组件传递到子组件，而无需每次都重新渲染父组件？
【发布时间】：2021-06-16 05:02:48
【问题描述】：

我在父组件中有状态，必须将此状态传递给子父级，以便进行一些应该更新的操作。知道有什么问题吗？每次更新我的孩子和我的父组件重新渲染后，我在父级中有useEffect() 挂钩。我怎么能在不重新渲染的情况下做到这一点？我应该使用简单的变量作为传递列表吗？如果是，我如何每次更新它并将其传递给子组件知道我只是尝试在父组件中使用状态钩子有什么建议吗？

【问题讨论】：

如果您正在更新父级中的状态，那么它将/应该重新渲染。当组件重新呈现时，它们会重新呈现其子级（子树）。您能否更新您的问题以包含Minimal, Complete, and Reproducible Code Example？如果你看不到它在做什么，那么调试代码并不容易。
一般来说，状态的改变应该导致重新渲染。如果您想在不导致任何重新渲染的情况下操作一个值，您可以使用 useRef 将其存储在一个 ref 中——但这并不常见
太好了，下次我会用它@DrewReese

标签： reactjs typescript redux react-hooks frontend

【解决方案1】：

听起来您想要完成的工作与 React 的整个架构背道而驰。本地组件“状态”或传递给组件的“道具”的任何更改都会触发重新渲染。你到底想完成什么？一个代码示例会很好......

【讨论】：

这应该是评论而不是答案，因为它要求澄清。

【解决方案2】：

使用备忘录防止渲染子组件


Parent.js
---------

function Parent(props) {
  return (
    <div>
      <Child data={data}/>
    </div>
  );
}

export default Parent


Child.js
--------


function Child({data}) {
  return (
    <div>
      {data}
    </div>
  );
}

export default React.memo(Child);

【讨论】：