React _ 元素渲染

元素渲染

React元素是构成React应用的最小单元。

React元素

React元素就是要在页面上展示的内容：

const element = <h1>反清复明</h1>;

React元素与浏览器DOM元素并不相同，React元素是开销极小的JavaScript对象；React DOM是用来负责更新浏览器DOM与React元素保持一致。

换而言之，就是将数据层与视图层绑定。为啥不用jQuery去做这件事情？为啥非要用React去做这些事情？还是老原因，React所针对的应用场景；React是一种工具，如果对于简单的事情，用React确实是很绕，很费事，麻烦；但是对于复杂度足够高，前端数据层与视图层逻辑关系复杂、交互较多、变化较多的这类应用场景，React才能显示它的生产效率。因此，还是老生常谈的事情，jQuery与React并无高低贵贱之分，只是用武之地不同。最头疼的就是技术鄙视链，带坏了一群又一群人。

元素渲染

在HTML中自定义一个div元素，将该元素id属性设置成“root”；设置id属性主要是为了之后容易根据id属性进行选择；该div元素，就是之后用来展示内容的DOM节点。

<div id="root"></div>

再如下所示，使用ReactDOM.render()方法将指定React元素渲染到指定DOM节点中去，即可展示出“反清复明”四个大字。

const element = <h1>反清复明</h1>;
ReactDOM.render(element, document.getElementById('root'));

运行一下

更新已渲染的元素

React元素是不可变对象，一旦被创建，再更改此React元素也无济于事。但是，可以重新创建一个React元素，再渲染至指定的DOM节点。

function showTime() {
  const element = (
    <div>
      <h1>反清复明</h1>
      <p>现在时间是： {new Date().toLocaleTimeString()}</p>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(showTime, 1000);

运行一下

setInterval()是JavaScript内置的回调函数，即每隔指定毫秒，运行一次指定函数。另外，React DOM会自动将要渲染的React元素和现有的DOM节点进行比较，从而达到只更新需要更新的部分，从而节省浏览器资源的开销。如上述示例中，React DOM则会每次只更新时间变化部分，像“反清复明”和“现在时间是：”这些部分，React DOM都不会去碰的。这点特性非常优秀。

元素渲染

推广