在 React 中防止不必要的 re-renders of table rows / children

Question

假设有一个 table 需要保持某种状态，例如，知道悬停的最后一个元素。为此，我们需要 child 元素上的 onMouseOver 事件，如下所示：

<tr onMouseOver={handleMouseOver}></tr>

然后包含 table 的组件将 re-render 在 setState({lastHovered: e.target}) 之后的所有 children（类似这些）

如果悬停的目标是仅对一行进行更改（假设 show/hide 不使用 CSS 的内容）是否有办法将此状态保持在比该行更高的级别并且只呈现 <tr> 中受悬停影响的变化？

例如，假设将鼠标悬停在 table 内或悬停在外时会有延迟。悬停时，children 应该显示工具提示，但前提是直接悬停在上面。 table/parent 需要保持一些状态来跟踪这个 但是有没有办法不必 re-render 整个列表 children ？

Answer 1

对于功能组件

将所有 tr 元素包裹在 React.memo (read) 中，以仅监听其内部属性的变化。此外，将 onMouseOver 事件放在 table 本身而不是每个子直接元素上，然后检查哪个子元素处于“焦点”（即 event.target）。

内部 table 组件：

const [lastHovered, setLastHovered] = useState(null);
const [trProps, setTrProps] = useState(null);

return (
  <table onMouseOver={event => setLastHovered(event.target) /* Also check if 'TR' type */ }> 
    <TableRows someData={trProps} />
  </table>
)

Table 行组件：

const TableRows = React.memo( ({someData}) => /* Triggers update only if 'someData' changes */
      <> { someData.map( data => <tr>{data}</tr> ) } </>
    )

注意：以上代码未经测试；编写以演示可能的解决方案。

对于 Class 个组件

如果您使用 class 组件，则创建一个自定义 Table 行元素并添加 shouldComponentUpdate() (read) to control rerenders, or use PureComponents (read)。

在 React 中防止不必要的 re-renders of table rows / children

Preventing unnecessary re-renders of table rows / children in React

javascript

reactjs

user-interface

hover

state

对于功能组件

对于 Class 个组件