React 学习笔记 - 元素

元素是构成React的最小单位。

const element = <h3>Hello world</h4>

React中的文档中提醒初学者很容易把元素和另一个内涵更加广泛的定义“组件”弄混了。注意一下。

该怎么使用元素呢？

我们需要在html页面添加一个根DOM节点。
例如

<div id="root"></div>

然后我们把一个元素传入ReactDOM.render()的方法来将其渲染到页面上来。

const  element = <h2>Hello world</h2>

ReactDOM.render(
    element,
    document.getElementById('root')
);

怎么让页面动起来

React元素都是immutable不可改变的。单元素在被创建之后，你是无法改变其内容或者属性的。一个元素就是动画中的一帧，他代表应用界面在某一个时间点的样子。

那么我们想到的方法就是不断的创建新的元素，并不断的传入ReactDOM.render()函数。

function tick()
{
    const element =
    <div class=“demo”>
        <h1>Hello world</h1>
        <h2>It is {new Date().toLocaleTimeString() }</h2>
    </div> 
    
    ReactDOM.render(
        element,
        document.getElementById('root')
    )
}

setInterval(tick, 1000)

当然我们后面实际开发中应该不会写这么傻的代码，但是我们通过Source观察，React并不会更新div.demo中的所有内容，而是只更新了必要的部分，amazing