通读了一遍《官方文档》，读了几本书：[意] 米凯莱·贝尔托利的《React 设计模式与最佳实践》、陈屹（yì）的《深入 React 技术栈》、程墨的《深入浅出 React 和 Redux》，有一些简单的思考。

其实，React 只是一个用户构建用户界面的 JavaScript 库，虽然其设计理念与 JQuery 这种以前使用的库不同，但学起来应该没有想象中那么难。

对于 React 来讲，其实学会两个 API，基本就可以理解它的大致工作原理了，分别是 React.createElement 和 ReactDOM.render。

React.createElement

1 React.createElement(
2   type,
3   [props],
4   [...children]
5 )

功能：创建并返回 React 元素

参数：

type: 必填，元素类型，可以是 1️⃣ html 标签字符串 2️⃣ React 组件

props: 可选，元素属性，是一个对象

children: 可选，元素的子元素，相当于嵌套在元素内部的元素

返回：

React 元素

举例：

扫描二维码关注公众号，回复： 7386435 查看本文章

1 // create React element <li>'s
2 var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
3 var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
4 var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
5 
6 // create <ul> React element and add child React <li> elements to it
7 var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);

通过上述代码创建的 reactElementUl 其值为：

 1 {
 2     type: 'ul',
 3     props: {
 4         className: "myList",
 5         children: [
 6             {
 7                 type: 'li',
 8                 props: {
 9                     id: 'li1',
10                     children: 'one'
11                 }
12             },
13             {
14                 type: 'li',
15                 props: {
16                     id: 'li2',
17                     children: 'two'
18                 }
19             },
20             {
21                 type: 'li',
22                 props: {
23                     id: 'li3',
24                     children: 'three'
25                 }
26             }
27         ]
28     }
29 }

这创建了一个具有树状结构的对象，并且其描述了这一段页面长什么样子：

1 <ul class="myList">
2     <li id="li1">one</li>
3     <li id="li2">two</li>
4     <li id="li3">three</li>
5 </ul>

那 React 元素最终如何渲染到页面中呢？

ReactDOM.render

1 ReactDOM.render(element, container, [callback])

功能：在页面指定的位置（container）中渲染 React 元素

参数：

element: React 元素（React Element）

container: DOM 元素（DOM Element）

callback: 回调函数，渲染完毕后，调用回调

返回：该元素的引用

举例：

1 <html>
2 <head>
3     <title>React App</title>
4 </head>
5 <body>
6     <div id="root"></div>
7 </body>
8 </html>

 1 import React from "react";
 2 import ReactDOM from "react-dom";
 3 
 4 function app() {
 5     // create React element <li>'s
 6     var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
 7     var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
 8     var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
 9 
10     //create <ul> React element and add child React <li> elements to it
11     var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
12       return reactElementUl;
13 }
14 
15 ReactDOM.render(app(), document.getElementById('root'));


以上代码可以在 https://codesandbox.io 尝试运行。

总结

1. 通过 React.createElement 创建 React 元素；

2. 通过 ReactDOM.render 将 React 元素渲染到页面上；

3. 如何更新页面呢？那就重新进行第一步创建新的 React 元素，然后再进行第二步重新渲染；

4. 上面说的这个做法不会有性能问题吗？所以 React 使用了 Virtual DOM 技术。

那什么是 Virtual DOM 呢？留着后面接着扯。

其实 React 很简单

React.createElement

ReactDOM.render

总结

猜你喜欢