React学习笔记02-----React基本使用

一、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，和没加一样