- react元素 是一个对象
- react 只有一个根节点。
- react元素通过 ReactDOM.render()函数渲染到页面上
React 元素可以用三种方式渲染
首先定一个挂在的div <div id="example”></div>
-
直接渲染
直接写一个element
function tick() {
const element=(
<div>
<h1>hello world</div>
<h2>现在是{new Date().toLocaleTimeString()}</h2>
</div>
)
}
ReactDOM.render(element, document.getElementById(‘example') ;
setInterval(tick,1000)
//element变了之后，react会自动更新到页面上。
-
通过函数
将要渲染的div元素，用函数包裹起来
function Clock(props){
return (
<div>
<h1>hello world</div>
<h2>现在是{props.date.toLocaleTimeString()}</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
)
}
setInterVal(tick,1000)
// 使用函数后，在render函数里可以用<Clock>标签，更加语义化。
-
通过React.Component的ES6类
通过class类来声明div内容。
class Clock extends React.Component {
render() {
return (
<div>
<h1>hello world</div>
<h2>现在是{this.props.date.toLocaleTimeString()}</h2>
</div>
)
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
)
}
setInterVal(tick,1000)
// tick函数部分一样，还是可以用CLock直接替代掉element，这是组件声明的方法，在Component里面也要写render(){}