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')
    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元素——被改变的元素。