React更新元素 基础

时间:2025-03-18 19:33:26

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会对比元素内容的先后不同,渲染的时候只更新不同的部分

相关文章