渲染元素节点
注意这里只是讲解React基础的语法规则,没有可执行的代码的地方,因为要执行代码看效果需要搭建开发环境,我的目的是学习ReactNative开发。ReactNative的语法是基于React的,所以这里只是里了解React的语法,对于去解读ReactNative文档打基础。
一个简单的渲染元素的🌰
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
这个🌰比上一篇里面的🌰要简单得多,这里还是还是继续解释一遍代码。
const element = <h1>Hello, world</h1>;
定义了一个h1标签,用element来指向,
后面element就是表示'<h1>Hello, world</h1>'这么一串html标签
ReactDOM.render(element, document.getElementById('root'));
渲染element标签到UI界面中,
element的父节点是通过js里面的id选择器取到的
对于什么是id选择器,如果有不懂的还是要去了解一下基本的js和html知识的。
更新已经渲染的标签
一个UI界面不可能永远保持不变,如果是保持不变的那就是一个静态界面了,通常我们的界面都是动态变化的。React更新界面的方式只有一种就是创建新的元素替换掉旧的元素,这和iOS的思路有些不一样,iOS是尽量少的去创建对象只改变对象的属性达到复用的效果。
🌰又来了
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
看到这么一串可能又要一脸懵逼了,不要担心,慢慢来。
还是拆分来看
第一部分
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
就是定义了一个名字是tick的函数
上一篇中在函数外面定义了一个element元素节点,在这里只不过是吧这个定义的地方挪到了函数里面。这样讲吧,上一篇里的element是一个全局变量,这里的element是一个在函数里的局部变量,应该可以很好理解了。
tick这个函数具体做的什么事情呢?
就是
ReactDOM.render(element, document.getElementById('root'));
实质性的功能代码就是这一行,具体这一行做了什么,忘记的话可以回顾第一篇里的讲解。
最后讲解一个h2标签里的代码块
It is {new Date().toLocaleTimeString()}
这里又出现了一个{} ,里面包含的就是一串js代码
js代码解读,new是js的一个关键词用于创建一个对象,Date是js的一个类,就像iOS里面的NSDate或者Date,这个类有一个方法toLocaleTimeString。从字面就可以知道,返回这个时间对象的本地时区字符串。
整体的解读就是创建一个时间对象,得到这个事件对象的时间字符串,替换花括号的内容。
第二部分
setInterval(tick, 1000);
是一个定时器代码,相当一iOS里面的NSTimer或者Timer,js里面的是以毫秒为单位的,所以是每秒调用一次tick方法
只会更新需要更新的标签
就是说在每一次调用tick方法的时候,虽然element包含了几个标签(div,h1,h2)但是每次只会更新h2标签,因为只有h2的内容发生了变化。
好了要下班了,今天就写到这里,明天会写组件,props,state,class,和生命周期等