渲染元素节点
注意这里只是讲解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，和生命周期等
网友评论