React介绍

react起源于Facebook的内部项目，在13年5月开源。react不是一个完整的MVC框架，最多可以认为是MVC中的V（view），react并不认可MVC开发模式。可以理解为，react将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了页面。

react特性

1. 专注于视图层
2. 虚拟dom，最大程度减少直接与dom的交互
3. JSX 是js的扩展
4. 组件化 使得代码更容易复用
5. 单向响应式的数据流

 

传统dom

虚拟dom

dom操作非常的昂贵，前端开发中，消耗最大的就是dom操作。react把真实的的dom树转化成JavaScript对象树，也就是Virtual DOM

---

搭建项目

方法一：引入.js文件（别用

方法二：脚手架 官方推荐 Create-react-app（需要有node、npm环境，需要yarn

npm install -g create-react-app  //全局安装create-react-app

create-react-app my-app   //创建一个项目，安装过程较慢

执行第二步的时候，按住shift，在桌面右击鼠标，选择“在此处打开命令窗口”，就是在桌面创建啦~

此外，第二步可能不成功，有可能是node版本问题，看一下报错提示，更新一下node

常见问题：

npm安装失败

• 切换为npm镜像为淘宝镜像
• 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
• 如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行 npm install命令
• 再不能解决就删除node_modules及package-lock.json的同时清除npm缓存 npm cache clean --force 之后再执行 npm install 命令

整个项目安装过程可能有点慢，这个过程会安装三个东西：

• react：react的顶级库
• react-dom：因为react有很多的运行环境，比如app端的react-native，我们要在web上就能运行react-dom
• react-script：包含运行和打包react应用程序的所有脚本及配置

cd my-app

npm run eject //可以不安装

npm run start

根据上面的提示，通过 cd your-app 命令进入目录并运行 npm run start 即可运行项目。

项目文件：

 

index.js是整个项目的入口文件

<React.StrictMode> ：

• 识别不安全的生命周期
• 关于使用过时字符串 ref API 的警告
• 检测意外的副作用
• 检测过时的 context API

App.js就是渲染出来的页面，负责页面上的内容

如果安装了eject，解释一下script里都装了什么：

 build是打包上线用的，start是本地开发代码，test是脚本测试用的

---

JSX语法和组件

• js与xml的结合体
• 在js中将模板和数据进行拼接
• 以书写js的方式书写html

JSX将HTML语法直接加入到JavaScript代码中，在实际开发中，jsx在产品打包阶段都已经编译成成js，没有任何副作用，让代码更直观更容易维护

 原理：JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM 元素 —>插入页面

创建组件        

快速创建组件快捷键：rcc

组件名字首字母一定要大写！！！！

①class组件（常用）：

 

 ②函数组件（16.8之前是无状态组件，16.8之后有了react hooks）：

 

③组件的嵌套

 

写项目的时候遵循组件化