当 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添加到子项组件的问题。