在Vue
中template
模板得到大量的使用,只要你会写HTML
那么应该难不倒你这个小机灵鬼。而React
则是使用了在函数中直接返回DOM
。看起来非常的神奇,也导致了一些小伙伴在入门的时候会有点摸不着头脑,但是如果有一定基础,在Vue
中写过了Render
函数的话,我想上手起来还是非常容易的。它看起来是下面这个样子的。其本质上就是一个createElement
的过程。所以,将这种模板的渲染方式称之为JSX
。
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>你好呀</h1>
<p>今天又是充满希望的一天...</p>
</div>
);
}
export default App;
我们先来改造一下
从上面的 App() 函数,也可以说是一个类吧,里面返回了一段代码,就是直接的 html,js跟html混合着写就是我们所说的 jsx 代码
我们先从函数里面说起吧
我们可以创建一个 函数
function createElement() {
let app = <App />
let sm = <React.StrictMode>{app}</React.StrictMode>
let root = document.getElementById('root')
ReactDOM.render(sm, root)
}
createElement()
我们先来创建一个时钟函数
function clock() {
let date = new Date()
let app = <h1>这是一个时钟 {date}</h1> // vue {{}} react {}
let root = document.getElementById('root')
ReactDOM.render(app, root)
}
clock()
setInterval(clock, 1000)
注意上面的代码会报错
必须是字符串
function clock () {
let date = new Date().toLocaleTimeString()
let app = (<h1>这是一个时钟 {date}</h1>) // vue {{}} react {}
let root = document.getElementById('root')
ReactDOM.render(app, root)
}
clock()
setInterval(clock, 1000)
以组件的形式,以及传值的形式
function Clock(props) {
return (
<h1>
这是一个时钟
{props.date.toLocaleTimeString()}
</h1>
)
}
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
)