一、React简介
想实现页面的局部刷新,而不是整个网页的刷新。AJAX+DOM可以实现局部刷新
1.特点
(1)虚拟DOM
开发者通过React来操作原生DOM,从而构建页面。
React通过虚拟DOM来实现,可以解决DOM的兼容性问题,可以保证对网页最小的修改,避免使用DOM的复杂API
(2)声明式
以结果为导向,根据开发者的需求自动生成相关代码。JSX
(3)基于组件
将网页中的各个部分拆分出了各个组件,使组件可以复用,降低代码之间的耦合
React本质在开发组件
(4)支持服务器端渲染
二、入门开发
1.引入JS文件
react-dom可以开发网页(操作和DOM相关的时候用);react-native可以开发原生应用。根据需求分别引入,react必须引入。
2.原生DOM和React的写法对比
(1)DOM元素
通过DOM向页面中现有的div中添加一个div
(2)React元素
通过React向页面中现有的div中添加一个div
3.API
(1)createElement()
可以一次性创建React元素名称、属性、内容
创建的React元素不能修改,如何替换?
(2)createRoot()
(3)render()
三、JSX
注意事项
四、渲染列表
1.for循环
通过循环统一给数组中的元素加上<li>
2.map()
通过箭头函数统一给数组中的元素加上<li>
五、虚拟DOM
1.好处
2.刷新的比较顺序
通过diffing算法,依次比较
3.key属性
在显示数组时,需要设置key
可以避免大量的不必要的刷新,key在当前列表中唯一即可,开发中一般采用数据的id作为key,不会使用索引作为key,和没加一样