通读了一遍《官方文档》,读了几本书:[意] 米凯莱·贝尔托利的《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 元素
举例:
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 呢?留着后面接着扯。