初识React

• 初识React
• 虚拟DOM
• React的基本单元
• 小结

初识React

1. React是一个用于构建跨平台用户界面的JavaScript库.

2. React有哪些优秀的思维模型:
   2.1持续保持“重新思考已建立的最佳实践”的精神(鼓励开发人员们更新最新的语法、API)
   2.2 对依赖相似逻辑和UI的部分代码进行封装,并将会始终确保该部分保持最新(鼓励开发者们写类似“框架”的code)

3. React有哪些更好的性能:

   当访问、修改或创建DOM元素时,浏览器常常要在一个结构化的树上执行查询来找到指定元素. 访问元素仅是更新元素的第一部分,通常情况下,作为更改的一部分,它不得不重新进行布局、缩放和其他操作. (这些操作计算量都很大)

   3.1 虚拟DOM使用差异对比和只更新已更改的部分,帮助优化对DOM的更新,提高渲染的性能,并可以让开发者可以少考虑多复杂的状态追踪.

React的对比和更新流程

虚拟DOM

1. DOM(Ducoment Object Model)是一种反映了XML文档层次结构的树形结构.

   
   
   DOM树结构的简化版本

2. 虚拟DOM是模仿或镜像存在于浏览器中的文档对象模型的数据结构或数据结构的集合.

React的虚拟DOM处理数据的变更检测,并将浏览器事件转换为React组件可以理解和响应的事件. React的虚拟DOM还为性能专门优化了对DOM的更新操作.

DOM 和虚拟DOM

拼装起来:
虚拟DOM会作为应用程序代码和浏览器DOM之间的中间层(虚拟DOM向开发人员隐藏了变更检测与管理的复杂性并将其转移到专门的抽象层)

React的基本单元

1. React的基本单元是组件.
2. 组件是返回JSX(JavaScript XML)的函数.
3. JSX是一种完全利用JavaScript的功能编写类似HTML代码的方法.
   拼装起来:
   React组件始终返回JSX,然后执行并将其转换为HTML

小结

1. React是一个用来构建用户界面的库,它最初是由Facebook的工程师创建的.
2. React 提供了一个基于组件的简单、灵活的API.
3. 组件是React的基本单元,在React应用中被广泛使用.
4. React在程序和浏览器DOM之间实现了一个虚拟DOM层.
5. 虚拟DOM使用快速对比算法对DOM进行高效更新.
6. 虚拟DOM具有优秀的性能,但最大的好处是他提供的思维模型

参考文章:
用思维模型去理解 React
React实战

下一节: 我们的第一个组件