React进阶话题探讨

Time: 20190717

在浏览器中使用React需要引入两个类库：

React
ReactDOM

其中React用于创建视图，ReactDOM用于在浏览器中渲染UI.

需要用HTML元素，用于ReactDOM渲染UI。

一种直接在前端使用的方式是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pure React Samples</title>
</head>
<body>
    <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.4.2/dist/react.js"></script>
    <script> 
        // 添加React应用的JS代码
    </script>
</body>
</html>

VirtualDOM

什么是DOM元素？

构成HTML文档的元素就是DOM元素。

什么是Ajax技术？
浏览器可以使用Ajax技术请求和载入一小部分数据，因此整个Web程序可以只用一个页面，依靠JS更新用户界面。

初始载入一个页面，然后使用JS动态销毁或创建新的用户界面。

即，让JS承担了大量的工作。

DOM API

JS可以使用它们来动态交互、修改DOM。如：

document.createElement
document.appendChild

值得注意的是，用DOM API插入新元素的过程很低效。

React脚本库的设计初衷是帮助用户更新浏览器的DOM。使用React，我们不直接与DOM打交道，而是和Virtual DOM交互。

Virtual DOM概念上和HTML元素是相互对应的，只是它们是JS对象。追访问JS对象要比访问DOM API高效。

我们直接操作JS对象，即Virtual DOM，让React通过DOM API构造UI和浏览器交互，React负责高效。

如：

React.createElement("h1", null, "Baked Salmon")

生成的HTML元素是：

<h1>Baked Salmon</h1>

其中第二个参数是属性，我们可以创建包含属性的元素。

React.createElement("h1", 
 {id: "recipe-0", 'data-type': "title"},
 "Baked Salmon")

ReactDOM

ReactDOM.render可以将子节点渲染到DOM上。举个例子：

var dish = React.createElement("h1", null, "Baked Salmon")
ReactDOM.render(dish, document.getElementById('react-container'))

渲染效果：

<body>
  <div id="react-container">  
    <h1> Baked Salmon</h1>
  </div>
</body>

用户需要完成的全部工作是：创建元素，并将它渲染到DOM上。