當 className 更改時，React 子項會重新呈現

Question

當父級的 className 發生變化時，React 子級會重新渲染。

import React from 'react';
import { useSelector } from 'react-redux';
import items from './ItemsList.js';
import Item from './Item';
import './style.scss';

export default () => {
    const isDisabled = useSelector((state) => state.Items.isDisabled);

    return (
        <div className={`container items-container col ${isDisabled ? 'disabled' : ''}`}>
            <div className="row items">
                {items.map((obj) => (
                    // All these items re-renders, when parent container className changed
                    <Item key={obj.id} obj={obj} />
                ))}
            </div>
        </div>
    );
};

當isDisabled更改為true並且disabled樣式附加到父container ，子Item元素會重新呈現。

如何在不重新渲染子元素的情況下將樣式/類名附加到父元素？

Answer 1

<Items> 

可以是純組件。

或者

只需在 Items 中使用shouldComponentUpdate()生命周期鈎子。

Answer 2

對於您提到的真實情況，實際上只有一件事發生，那就是isDisabled是該父組件的狀態屬性。

由於您正在使用 Redux 並調用useSelector((state)=>{}) ，這實際上將 AppState 綁定到組件狀態。 所以從概念上講，通過使用useSelector()您將isDisabled視為狀態屬性。 按照 React 的約定，任何狀態發生變化的組件都必須重新渲染。 所以在你的情況下， parent實際上正在重新渲染。

這是一個重要的引用，它解決了 Hooks 文檔中的所有問題：

選擇器大約相當於mapStateToProps參數以在概念上進行連接

以下是一些參考資料，可幫助您更深入地了解該主題：

1. 反應鈎子 API
2. 連接，映射TopState

Answer 3

解決了我將React.memo添加到子項組件的問題。