当 className 改变时 React children 重新渲染答案

【问题标题】：React children re-render when className changed当 className 改变时 React children 重新渲染
【发布时间】：2020-12-16 17:30:46
【问题描述】：

当父级更改的 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 元素重新渲染。

如何在不重新渲染子元素的情况下将样式/类名附加到父元素？

【问题讨论】：

isDisabled 是国家财产吗？
“禁用”有什么作用？你能给我们看看吗？
isDisabled 是 redux 状态属性。

标签： javascript html reactjs render

【解决方案1】：

<Items>

可以是纯组件。

或者

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

【讨论】：

如果isDisabled 不是状态属性，则不应出现这种情况。
isDisabled 是 redux 状态属性。您的解决方案不起作用。
@MosiaThabo 怎么样？如果parent 组件的状态发生变化，父组件的render() 运行，子组件如何隐式知道它不应该重新渲染？
我的意思是，只有当isDisabled 是状态属性时才会重新渲染。因此，如果所讨论的属性不是状态属性，则使用生命周期方法并不理想。 OP 必须明确这一点，isDisabled 是状态属性还是普通属性。
@user14080657 你用的是pureComponent 还是shouldComponentUpdate ？，你能粘贴你的<Items> 组件的样子吗？你用的是什么版本的 Reat？

【解决方案2】：

你提到的是真的，实际上只有一件事发生，那就是 isDisabled 是该父组件的状态属性。

由于您使用 Redux 并调用 useSelector((state)=>{})，这实际上将 AppState 绑定到 Component 状态。所以从概念上讲，通过使用useSelector()，您将isDisabled 视为状态属性。按照 React 的约定，任何状态更改的组件都必须重新渲染。因此，在您的情况下，parent 实际上正在重新渲染。

这里有一个重要的引用，它解决了 Hooks 文档中的所有问题：

选择器在概念上大致相当于mapStateToProps 参数来连接

这里有一些参考资料可以帮助您更好地理解这个主题：

【讨论】：

那么如何解决这个问题呢？我正在使用 connect 将道具传递给父级，但是当道具更改时，它会重新渲染子级。

【解决方案3】：

解决了我将React.memo 添加到子项组件的问题。

【讨论】：