状态

UI无非就是应用程序的状态的一种表现形式.
我们已经了解ReactDOM.render()函数可以挂载或局部更新DOM, 但是我们需要一种更精妙的方式.

第一种方式: 渲染并重绘整个根节点

每当应用程序状态有任何更新, 我们就刷新一次根节点, 这样是可以的, 毕竟React只会更新变化的节点, 但是整个树节点都进行一次比对是冗余的.
我们来看这种不推荐的方式:

/**
 * 根据官网描述, 我们可以只调用一次ReactDOM.render挂载一个根节点.
 * 应用程序状态更新就刷新一次根节点是可以的, React只会更新变化的节点, 但是整个树节点都进行一次比对是冗余的.
 * 我们来看这种不推荐的方式.
 */
import ReactDOM from ‘react-dom‘;
import React, { StrictMode, Component, createElement } from ‘react‘;

document.body.innerHTML = `<div id="app"></div>`;

let count = 0;

function MyTitle() {
    return createElement(‘div‘, {
        style: {
            fontSize: ‘38px‘,
            color: ‘#880088‘,
            background: ‘pink‘,
        },
    }, `我觉得不行 +${count}`, ‘ => ‘, createElement(‘button‘, {
        style: {
            fontSize: ‘38px‘,
        },
        onClick() {
            count++;
            render(); // 应用程序状态发生变化, 刷新根节点
        },
    }, ‘+1‘));
}

function render() {
    ReactDOM.render(createElement(StrictMode, null, MyTitle()), app);
}
render(); // 立即挂载根节点

有没有其它方式

根据官网描述, 我们可以只调用一次ReactDOM.render挂载一个根节点, 那怎么更新UI呢?

END

React 入门: 状态 UI更新

原文：https://www.cnblogs.com/develon/p/13596537.html