React_react入门

一、react作用

react作用：替代DOM，用于敏捷开发，快速搭建前端web项目

二、react特点

• 虚拟DOM
• 声明式

  React可以轻松创建交互式用户界面。为应用程序中的每个状态设计简单的视图。当数据更改时React将高效地更新和正确的渲染组件
  声明式视图可以使代码更具可预测性，更易于调试

• 基于组件

  创建好拥有各自state的组件，再将其组合构成更复杂的UI界面。
  由于组件逻辑是用 JavaScript 而不是模板编写的，因此可以通过应用程序轻松传递丰富的数据，并将 state(状态) 保留在DOM之外。

• 支持服务器端渲染
• 快速、简单、易学

三、3个API

React.createElement

• React.createElement(type,[props],[…children])
• 作用：创建React元素
• React元素无法修改

ReactDOM.createRoot()

• createRoot(container[,options])
• 作用：创建React的根容器

root.render()

• root.render(element)
• 当首次调用时，容器节点里的所有DOM元素都会被替换，后续的调用则会使用React的DOM差分算法（DOM diffing algorithm）进行高效刷新
• 不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有的子节点的情况下将组件插入已有的DOM节点中。

四、JSX简介

非字符串，也非HTML。可以理解为JS的拓展

• 在React中可以通过JSX来创建React元素，JSX需要被翻译成JS代码才能被React来执行
• 在React中若要使用JSX，必须引入babel来完成“翻译”

JSX就是React.createElement()的语法糖
在JSX执行之前都会被Babel转换为JS

JSX的注意事项

1. JSX不是字符串，不需要加引号
2. JSX中HTML标签应该小写，React组件应该大写开头
3. JSX中有且只有一个根标签
4. JSX标签必须正确结束（自结束标签必须写/）
5. 在JSX中可以使用{}嵌入表达式
6. 如果{}中的值为NaN,undefined,布尔值，将不会显示（这些值通常是用于进行判断）
7. 在JSX中，属性可以直接在标签中设置

注意

• class需要使用className代替
• style中必须使用对象设置
  style={{ background:‘red’}}

五、虚拟dom

在React中我们操作的元素被称为React元素，并不是真的原生DOM元素

React通过虚拟DOM将React元素和原生DOM进行映射，虽然操作的是React元素，但是这些操作最终都会在真实的DOM元素中进行体现

虚拟DOM的优点：

1. 降低API复杂度
2. 解决兼容问题
3. 提升性能（减少DOM的不必要操作）

虚拟dom核心：diff算法