React.js组件渲染疑问：useState状态变更时的渲染范围

• 调用useState()的set函数更新状态时，不会触发整个页面重新渲染，只会触发当前组件及其所有子组件的重新渲染（默认行为），效果上和Ajax的局部更新类似，但底层实现逻辑不同。
• 具体逻辑：
  • React的渲染是组件级别的，当组件状态变更，React会重新执行该组件的函数（类组件则执行render方法），生成新的虚拟DOM，随后对比新旧虚拟DOM的差异，只把变化的部分更新到真实DOM中，这就是大家常说的"局部渲染"。
  • 举个直观的例子：

    function Parent() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <button onClick={() => setCount(count + 1)}>点击+1</button>
          <Child />
        </div>
      );
    }
    
    function Child() {
      console.log("Child组件触发渲染");
      return <div>我是子组件</div>;
    }
    

    点击按钮更新count状态时，Parent组件会重新渲染，默认情况下Child组件也会跟着重新渲染。如果想避免子组件无意义的重渲染，可以用React.memo包裹Child组件，让它仅在props发生变化时才渲染。
• 和Ajax局部更新的区别：Ajax是手动发起请求获取数据后，通过DOM API手动更新页面指定区域；而React是状态驱动视图，自动完成虚拟DOM对比和真实DOM的差异更新，无需开发者手动操作DOM。

内容的提问来源于stack exchange，提问作者Nagesh Singh