React 学习笔记 - 元素

xcwong

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

阅读 785

helloword
happy coding

hello world

502 声望
20 粉丝
0 条评论

hello world

502 声望
20 粉丝
宣传栏