Day4简单实例练习

今天要介绍透过CDN连结的方式快速运用react，简单建立一个react component。

CDN连结:

 <!-- 开发时使用 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

透过react产生HTML架构

具体步骤如下所示，需要留意大小写是否正确:

1. React元素=React.createElement(HTML标签,属性,文字或react元素)
2. ReactDOM.render(React元素,HTML元素容器)

下面透过react产生项目清单符号，

HTML

<div id="app"></div>

Javascript

// 产生li的react元素
const li=React.createElement('li',{},'第一点');
const li2=React.createElement('li',{},'第二点');

// 产生ul的react元素，并将li的react元素放入ul里
const ul=React.createElement('ul',{},li,li2);

// 将react元素渲染到html架构里
ReactDOM.render(ul,document.querySelector('#app'));

Virtual DOM的方式改变真正的DOM

诚如昨天所介绍的，React的运作原理是建立在Virtual DOM上面，若触发事件或资料结构有异动时，只会针对异动的地方更新Actual DOM，下面会透过setInterval(..., 1000)的方式，观察DOM每秒钟的变化。

let index=0;

setInterval(function(){
index++;
const li=React.createElement('li',{},'第一点');
const li2=React.createElement('li',{},'第二点');
const li3=React.createElement('li',{},index);
const ul=React.createElement('ul',{},li,li2,li3);
ReactDOM.render(ul,document.querySelector('#app'));
} ,1000)

可以从网页检视中观察到只有变数li3会不断变化，但已经生成的li和li2皆不会重复生成。