React 学习笔记 - 元素

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34411563

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011265746

本文介绍了React的基本构成单元——元素，并详细解释了如何使用这些不可变的元素来构建动态UI。通过不断创建新元素并重新渲染的方式，实现界面的更新。

元素是构成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