reactjs - 反应父母对孩子道具传递而不重新渲染

Question

我的父组件上有一个按钮，子组件中有一个第三方表单。当用户单击按钮时，子组件中的保存功能应该运行。这是我的计划。

方法 1 我试过： 1.在父级上创建了一个名为save. 2. 单击按钮时，save 变为 true 3. Save 作为 props 传递给子级 4. Child 包含一个监听 props.save 变化的 useEffect() 5. 如果 props.save 为 true，则子级的 save 函数组件运行

方法2我试过：

1. 我没有传递道具，而是创建了一个 react-redux 商店。
2. store 包含默认为 false 的保存变量
3. 单击按钮时，在 redux 中保存变为 true
4. 我使用 useSelector() 挂钩来监听子组件内的保存变量更改
5. UseEffect 用于在检测到值更改时运行 save() 函数

这两种方法发生的情况是我丢失了子组件中的数据，因为父组件中的变量更改导致页面刷新。因此，我想将数据传递给孩子，而不会导致重新渲染。我有哪些选择？

提前致谢

Answer 1

感谢@Shyam，我终于可以解决这个问题了！

我的假设useState和props原因渲染是正确的。正如@Shyam 建议的那样，没有直接的方法可以避免它。

我在我的项目中使用 react-editor-js，这就是导致问题的原因

  <EditorJs
    instanceRef={()=>{//code to save the reference as state variable}}
    enableReInitialize
    data={{}}
    tools={EDITOR_JS_TOOLS}
  />

状态丢失的原因是instanceRef每次组件呈现时都会重新分配 my 。

可以通过包装将引用保存为状态变量的方法来防止这种重新分配useCallback()