美文网首页
React入门系列教程(六)重新渲染

React入门系列教程(六)重新渲染

作者: du1dume | 来源:发表于2019-03-08 11:48 被阅读0次

这里有一个显示时间的小程序:

<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所示:

图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所示:

图2

这就是使用react给我们带来的巨大性能优势,在重新渲染时,只会渲染需要被重新渲染的部分,或者说部分DOM元素——被改变的元素。

相关文章

网友评论

      本文标题:React入门系列教程(六)重新渲染

      本文链接:https://www.haomeiwen.com/subject/gmxrpqtx.html