React元素渲染

jsx的学习以及超级简介：

jsx既不是字符串也不是HTML；

看起来像模板语言，但是JavaScript的全部功能；

const element = <h1>Hello, world!</h1>;

详情：https://www.tslang.cn/docs/handbook/jsx.html

 元素渲染：

在下载并且安装react之后，就会出现最基本的元素渲染，下图是将多余文件和代码删除之后的结果，将引入的App.js的文件，暂时可以将App看成一个组件，将组件App渲染到id为root的dom节点上。

 将一个元素渲染到id为root的dom节点上：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React的元素是不能改变的对象，一旦被创建出来，就无法更改其属性和子元素。

这是一个jsx生成的对象；

 执行以下代码：

element.type="h2";

报错：

  既然无法直接更新dom节点，React是通过再次渲染的方式更新dom节点的。

index.js文件中添加如下代码： 

import React from 'react';
import ReactDOM from 'react-dom';
function second() {
    const element = (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(element, document.getElementById('root'));
}

setInterval(second, 1000);

 每次都重新渲染元组到dom节点上。

在vue中：

<template>
  <div>
    <h2>It is {{date}}.</h2>
  </div>
</template>

<script>
export default {
  name: "hello",
  data(){
    return {
      date:"",
    }
  },
  created() {
    this.date=new Date().toLocaleTimeString();
  },
  mounted() {
    setInterval(()=>{
      this.date=new Date().toLocaleTimeString();
    },1000)
  }
}
</script>

因为vue是双向绑定的，只要数据改变就会触发dom节点的更新。