React介绍
- 属于Facebook
- 开源时间: 2013/5
- React开发的原因:
- 为了在ins在代替体积庞大的jq,Facebook参考了当时比较热火的MVC模式框架,但是对他们都不是很满意,所以决定自己开发一套,这一套就是React
React vs MVC
-
React是一个轻量级的视图层框架,你可以认为它就是MVC中V
-
React的核心是: 组件系统
-
React高性能,因为React使用了虚拟DOM# 面试题: 你是否了解虚拟DOM?
-
虚拟DOM是什么?
- 我们使用js对象模型来模拟真实DOM,那么这个对象模型就是虚拟DOM
-
虚拟DOM为什么性能高?
- 因为我们操作的是虚拟DOM,大大减少真实DOM操作,那么就会节省内存,降低消耗
-
虚拟DOM工作流程[ vue/react ]
- vue
- 根据模板 -> 创建VDOM[ jsx ]
- render函数渲染jsx -> 虚拟dom对象模型
- 在mounted渲染真实DOM
- 当data选项数据改变时
- 在一次生成VDOM
- 通过diff算法【 使用js进行同级比较 】比对生成patch补丁对象
- 根据patch补丁对象重新渲染真实DOM
- React
- 根据模板 -> 创建VDOM[ jsx ]
- render函数渲染jsx -> 虚拟dom对象模型
- 在componentDidMount渲染真实DOM
- 当data发生改变时
- 在一次生成vdom
- 通过 React Filber【 React 16版本使用 】 算法进行比较,生成patch补丁对象
- 根据patch补丁对象重新渲染真实DOM
- vue
React Filber 算法是什么?
- 概念
- 将一个大的任务分成多个小片,然后执行每一个小片,每一个小片执行时间很短,总时间很长,但是给其他任务提供了可以执行的机会
React 特点
- 虚拟DOM
- 组件系统
- 单项数据流 - 组件系统
- JSX语法
React
-
使用
- 不能直接在浏览器运行,因为它里面有组件系统和jsx
- 解决: webpack解析组件系统,解析jsx
-
我们学习的时候: 是直接在脚手架中学习的
-
React脚手架
- CRA - react官网推荐 【 使用最多的 】
- 国内的
- 蚂蚁金服
- Dva - 守望先锋
- Umi - 乌米
- Dva + Node
- 蚂蚁金服
-
React这个框架的目的是什么?解决前端的什么问题?
- 高效实现用户输入数据快速展示在界面上
- 高效实现服务端数据渲染到界面
-
React特征
- 函数式编程
- 回归js
CRA
全称 create-react-app
-
安装
- 全局安装
- $ cnpm i crate-react-app -g
- create-react-app 项目名称
- 局部安装
- npx crate-react-app 项目名称
- 全局安装
-
元素
- React最小组成部分
-
组件
- 函数式组件,函数也可以是一个组件,大大体现: 函数式编程
- 组件是由元素构成的
- 函数式组件由一个参数props,来接收绑定在组件生成的属性
- ** 类组件 **
-
组件的组合和嵌套
-
React四种样式形式
-
React项目配置sass
-
React中数据的形式
- 属性 props
- 状态 state
-
props
-
定义形式有两种
- 外部传入 - 外部传入改变了,那么久改变
- 内部自己设置 - 不可更改
-
我们更多推荐大家的是使用外部传入,很符合React单项数据流特征
-
注意
- 属性一旦确定一般不去更改,属性是用来描述组件的特征和特性的
- 如果想改变只能由外部传入的属性改变
-
属性验证
- 依靠第三方包: prop-types
- state
- 定义形式有两种
- 直接在类中定义
- 放在类的构造器函数中 constructor 【 推荐 】
- constructor中的 super做了什么?
- React中如何更改state
- 使用 this.setState()
- 注意
-
- 状态只能自己定义,自己修改,别人无权修改
-
- setState()
-
参数【 2个 】
- 第一个参数用来修改状态,可以使函数也可是对象
- 第二参数是修改完状态执行的回调函数,这里可以完成一些副作用功能
- 可写可不写
-
React中界面的更新需要用setState来完成
-
总结:
- 有状态的组件就做有状态组件 - 类组件
- 没有状态的组件叫做无状态组件【 purecomponent 】 - 函数式组件
React中数据如何渲染?
Vue中是通过指令来进行渲染的,比如: v-for v-show v-if
- 条件渲染
- 列表渲染
- 表单绑定
什么时候用类组件?什么时候用函数式组件?
阿里:
如果只是简单的展示样式 -> 函数式组件
如果我们又状态需要管理 -> 类组件
React事件
React组件通信
- 回顾vue
- 父子组件通信 props
- 子父组件通信 $emit
- 非父子组件通信
- ref
- bus事件总线
- 多组件状态共享 vuex
todolist
- 增加
- 删除
- 修改
引入组件库
https://ant.design/index-cn
-
类型
- pc端 - 后台管理系统【 一般 】 [ ant design pro ]
- 移动端 - app [ antd-mobile ]
-
开发人员: 蚂蚁金服开发团队
-
按步骤配置按需引入
-
测试组件库
-
封装组件库
- 基于其他组件库进行二次封装的
学习目标
- 会读 会写
- 明白每一个生命周期钩子函数的作用和意义
- 学习技巧: 借用已经学习过的vue
说明:
生命周期在类组件中使用
函数式组件要使用生命周期咋整?
React 15 vs React 16 [ 扩展 ]
- 生命周期有区别
- React15对属性和状态分别使用的是: getDefaultProps 和 getInitalState, 而16版本统一生成constructor
- React16版本之后新增了一个错误处理阶段: componentDidCatch
- React 15采用diff算法, React16之后采用filber算法
- React15使用React.createClass 来创建类组件,而16使用class xx extends Component 来创建类组件
React 16 vs React 17[ 官方 ]
总结:
- React生命周期16版本
-
初始化阶段 - 自动执行
- constructor 继承属性 定义状态 绑定事件this
- componentWillMount
- render 生成vdom 计算 this.props this.state
- componentDidMount 数据请求 - 数据修改 - 获取真实DOM
-
更新阶段 - 数据改变
- componentWillReceiveProps [ 属性改变才执行 ] 接收新属性, 判断组件属性是否改变,可以用于监听
- shouldComponentUpdate 性能优化关键钩子函数 , 控制组件是否要更新
- componentWillUpdate
- render
- componentDidUpdate 获得了更新后的真实dom
-
销毁阶段
- componentWillUnmount 组件销毁, 善后
-
错误处理阶段
- componentDidCatch 记录错误信息和错误栈 、
- 功能实现降级UI
-
React动画实现
https://reactcommunity.org/react-transition-group/
React高阶组件 - HOC
- 全称: Height Order Component
- 作用:
- 将多个组件需要的方法或是组件进行封装,然后复用