这里有一个显示时间的小程序:
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
const currentTime = new Date().toLocaleTimeString()
const timeElement = <div>现在时间:{currentTime}</div>
ReactDOM.render(timeElement, rootElement)
</script>
这个程序的缺陷显而易见,它只显示浏览器最后刷新时的时间。如何实现一个动态的时间程序呢?
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
//把获取当前时间并渲染出来的代码包裹到一个函数里
function timeTick() {
const currentTime = new Date().toLocaleTimeString()
const timeElement = <div>现在时间:{currentTime}</div>
ReactDOM.render(timeElement, rootElement)
}
//运行一次函数,获得当前时间
timeTick()
//每秒运行一次函数,获得当前时间并渲染出来
setInterval(timeTick, 1000)
</script>
在浏览器中右键时间选择inspect
,我们看到紫色闪动的部分就是每秒重新渲染的内容,如图1所示:
我们来修改下代码,把当前时间用一个input
元素来显示:
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
//把获取当前时间并渲染出来的代码包裹到一个函数里
function timeTick() {
const currentTime = new Date().toLocaleTimeString()
const timeElement =
<div>
现在时间:
<input value={currentTime} />
</div>
ReactDOM.render(timeElement, rootElement)
}
//运行一次函数,获得当前时间
timeTick()
//每秒运行一次函数,获得当前时间并渲染出来
setInterval(timeTick, 1000)
</script>
现在我们用鼠标点击input
,发现当前焦点是保持在input
上的,请先记住这个现象。
下面我们来看看不使用react
实现这个程序:
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('rootElement')
//把获取当前时间并渲染出来的代码包裹到一个函数里
function timeTick() {
const currentTime = new Date().toLocaleTimeString()
//这里使用了模板字符串,注意引用变量的方式
const timeElement =
`<div>
现在时间:
<input value="${currentTime}" />
</div>`
rootElement.innerHTML = timeElement
}
//运行一次函数,获得当前时间
timeTick()
//每秒运行一次函数,获得当前时间并渲染出来
setInterval(timeTick, 1000)
</script>
这时我们再点击input
元素,会发现焦点马上就从input
上消失了。右键inspect
,我们会发现紫色闪动的部分包括整个rootElement
元素,也就是说整个rootElement
每秒都会被重新渲染一遍,这就是焦点失去的原因。如图2所示:
这就是使用react
给我们带来的巨大性能优势,在重新渲染时,只会渲染需要被重新渲染的部分,或者说部分DOM
元素——被改变的元素。
网友评论