问题描述

有两个变量，一个 _count_，不是父组件 state 中的值，一个 number 是父组件 state 中的值

点击更改‘ 更改 state 的值’ 按钮，父子组件同步刷新，而点击 更改 count 的值 按钮，子组件不会刷新

原因

父组件更改 count 的值，虽然父组件 count 值改变，但是不会触发组件更新，因为只有通过 setState 告知 react 页面更新，state 的意义就是监听数据变化，因而直接修改数据值不触发页面更新，数据虽然变化但页面不更新。

在 vue 中，采用的就是直接赋值的方式来更新 data 数据，并且 Vue 也能够使用最新的 data 数据渲染页面。这是为什么呢？ 在 vue2 中采用的是 Object.defineProperty() 方式监听数据的 get 和 set 方法，做到数据变化的监听 在 vue3 中采用的是 ES6 的 proxy 方式监听数据的变化

要想让子组件更新 dom，必须让子组件执行 render()方法，而父组件执行 render()方法后，子组件也会执行 render()方法，这就是为何父组件调用了 setSate()方法，子组件会刷新。

解决方案

如果想要传递子组件的 props 改变后刷新子组件 dom，就要将父组件的 state 中的值传给子组件，而不是将普通的变量传递给子组件