javascript - 如果对象数组中只有 1 个属性设置为状态更改，整个 DOM 是否会重新渲染？

Question

我对 React 还很陌生。这是我的一些代码:

    class App extends Component {
        constructor(props) {
            super(props);

            const db = [
                    {
                      name: 'xyz',
                      checked: false
                    },
                    {
                      name: 'abc',
                      checked: false
                    },
                    {
                      name: 'yui',
                      checked: false
                    }];

            // Set some state
            this.state = {
                db: db
            };
        }

然后我映射 this.state 以将这些项目显示到页面中。

现在，如果我更改例如 abc 的 checked 属性(使用 this.setState())，那么整个页面都会突出显示在 React Dev 工具中(蓝线)。是整个 DOM 被重新渲染还是只有一个属性的相应 UI 被重新渲染？

我猜测，由于存储在 App 状态中的数组正在发生变化，React 将此视为状态更改并重新渲染整个 App。真的是这样吗？

Answer 1

是的，它会再次调用您的render函数。如果您在主 App 组件中调用 this.setState()，则基本上意味着整个 App 组件将重新渲染。