React元素创建后无法修改其内容和属性。唯一的办法是创建新的元素,传入ReactDOM.render()方法
三种实现形式:
1.整体替换
function tick () {
const ele=(
<div>
<h1>更新元素</h1>
<h2>现在是:{new Date().toLocaleTimeString()}</h2>
</div>) ;
ReactDOM.render(
ele,
document.getElementById('example')
)
}
setInterval(tick,1000);
2.将要展示的部分封装起来
function Clocks (props) {
return (
<div>
<h1>Hello,world</h1>
<h2>现在是{props.date.toLocaleString()}</h2>
</div>
)
}
function tick () {
ReactDOM.render(
<Clock date={new Date()}>,
document.getElementById('example')
)
}
setInterval(tick,1000)
解析:每隔1秒执行tick 触发Clock 将参数传递到Clock函数中,修改html
3.创建React.Component的类,封装要显示的元素
class Clock extends React.Component{
render(){
return (
<div>
<h1>Hello world</h1>
<h2>现在是{this.props.date}</h2>
</div>
)
}
}
function tick (){
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('example')
)
}
setInterval(tick,1000)
React会对比元素内容的先后不同,渲染的时候只更新不同的部分