【问题标题】:React: How can I prevent the parent component re-rendering onmousemove state change when only the child component needs re-rendering?React:当只有子组件需要重新渲染时,如何防止父组件重新渲染 onmousemove 状态更改?
【发布时间】:2020-01-22 12:00:11
【问题描述】:

父组件更新状态 onmousemove 中的 x,y 属性,然后通过 props 将这些属性传递给子组件。目前,父母和孩子都重新渲染 onmousemove;有没有办法防止在父级上重新渲染,以便只有子级重新渲染?示例:父级为边界区域,子级为自定义光标。

【问题讨论】:

  • 最好分享一个sn-p,让别人帮忙
  • 只是不要将更新的属性保存到父母状态。
  • 您是否面临任何性能问题?如果否,则很好。如果是,那么你可以记住重的组件。
  • 我不认为你可以在不更新父组件的情况下更新子组件。如果您在 shouldComponentUpdate 函数中返回 false,则该特定组件将不会重新呈现。唯一的方法是将 x,y 作为子组件的状态。
  • 这能回答你的问题吗? React- update children but not immediate parent

标签: javascript reactjs


【解决方案1】:

将 state(x,y coords) 保持在子组件本地。

【讨论】:

  • 这个问题是状态处理将在父组件中。就像父 div 状态的 onClick 必须改变。
  • 您可以在单击时更新父状态,但不能在鼠标移动时更新
  • 是的,这行不通。子组件是一个光标,需要在用作边界框的父组件的 mousemove 上进行更新。父级捕获鼠标位置并将其传递给光标。我找不到从父事件处理程序中更改光标本地状态的方法,因此状态更改发生在父事件上,触发了两者的重新渲染。
猜你喜欢
  • 1970-01-01
  • 2019-01-08
  • 1970-01-01
  • 1970-01-01
  • 2018-10-18
  • 1970-01-01
  • 2018-10-07
  • 1970-01-01
  • 2018-08-12
相关资源
最近更新 更多