终极目标：掌握和使用react

本博客目的：记录react学习的进度和心得（react元素渲染）

内容：通过视频学习，掌握react基础语法。

前端框架react自学之react元素渲染(二)

1
let h1 = <h1>helloworld</h1>; //在index.js文件中

使用JSX的写法，可以创建JS元素对象。

把JS对象渲染（render）到对应的DOM节点(元素)上，也就是使用虚拟DOM。

注意：JSX元素对象，或者组件对象，必须只有1个根元素（根节点）。（不需要引号，JSX语法）

案例使用（注意JSX对象里面的注释不是使用//，也不是使用<!–>，而是使用{/* 注释*/}，下面一些代码的//只是我的一些简单示意）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	//实现页面时刻的显示

function clock(){
    let time = new Date().toLocaleTimeString()
    let element = (
        <div>
            <h1>现在的时间是{time} </h1>
            <h2>这是副标题</h2>
        </div>
    )//相当于定义一个虚拟节点，注意得有根节点，即一般包在div下.这个和vue的template有点像
    let root = document.querySelector('#root');//root节点的位置
    ReactDOM.render(element,root)//渲染
}

clock()

setInterval(clock,1000)//间隔1s使用一次clock

函数式组件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//react函数式组件渲染，即写一个返回对象的函数当做一个react组件
function Clock(props){ //函数当然可以传参
    return (
                <div>
                    <h1>现在的时间是{props.date.toLocaleTimeString()} </h1>
                    <h2>这是函数式组件开发</h2>
                </div>
    )//return的这个对象用()包裹
}

function run(){
    ReactDOM.render(
        <Clock date={new Date()} />, //函数式组件，并且可以传参date。在vue中也是在子组件定义props提供使用传参
        document.querySelector('#root')
    )
}

setInterval(run,1000)