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