假設有一個表格需要保持某種狀態，例如，知道懸停在上面的最后一個元素。為此，我們需要onMouseOver一個子元素上的事件，如下所示：
<tr onm ouseOver={handleMouseOver}></tr>
然后包含表格的組件將在之后重新渲染所有子項setState({lastHovered: e.target})（沿著這些線）
如果懸停的目標是僅對一行進行更改（假設不使用 CSS 顯示/隱藏某些內容），是否有一種方法可以將此狀態保持在比行更高的級別，并且僅呈現<tr>受影響的s 中的更改懸停？
舉個例子，假設在桌子內外徘徊有延遲。懸停時，兒童應顯示工具提示，但前提是直接懸停在其上方。表/父級需要維護一些狀態來跟蹤這一點，但是有沒有辦法不必重新渲染整個子級串列？
uj5u.com熱心網友回復：
對于功能組件
將所有tr元素包裹在一個React.memo( read ) 中以只監聽其內部 props 的變化。此外，將onMouseOver事件放在表格本身而不是每個直接子元素上，然后檢查哪個子元素處于“焦點”（即，event.target）。
內表組件：
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>
)
表行組件：
const TableRows = React.memo( ({someData}) => /* Triggers update only if 'someData' changes */
<> { someData.map( data => <tr>{data}</tr> ) } </>
)
注意：以上代碼未經測驗；撰寫以演示可能的解決方案。
對于類組件
如果您使用的是類組件，則創建一個自定義 TableRow 元素并添加shouldComponentUpdate()( read ) 來控制重新渲染，或者改用PureComponents( read )。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394370.html
標籤：javascript 反应 用户界面 徘徊 状态
上一篇：ReactJS可折疊元素純CSS