React知识点

React介绍

1. 属于Facebook
2. 开源时间： 2013/5
3. React开发的原因：
   • 为了在ins在代替体积庞大的jq，Facebook参考了当时比较热火的MVC模式框架，但是对他们都不是很满意，所以决定自己开发一套，这一套就是React

React vs MVC

1. React是一个轻量级的视图层框架，你可以认为它就是MVC中V

2. React的核心是： 组件系统

3. React高性能，因为React使用了虚拟DOM# 面试题： 你是否了解虚拟DOM？

4. 虚拟DOM是什么？

   • 我们使用js对象模型来模拟真实DOM，那么这个对象模型就是虚拟DOM

5. 虚拟DOM为什么性能高？

   • 因为我们操作的是虚拟DOM，大大减少真实DOM操作，那么就会节省内存，降低消耗

6. 虚拟DOM工作流程[ vue/react ]

   • vue
     1. 根据模板 -> 创建VDOM[ jsx ]
     2. render函数渲染jsx -> 虚拟dom对象模型
     3. 在mounted渲染真实DOM
     4. 当data选项数据改变时
     5. 在一次生成VDOM
     6. 通过diff算法【 使用js进行同级比较 】比对生成patch补丁对象
     7. 根据patch补丁对象重新渲染真实DOM
   • React
     1. 根据模板 -> 创建VDOM[ jsx ]
     2. render函数渲染jsx -> 虚拟dom对象模型
     3. 在componentDidMount渲染真实DOM
     4. 当data发生改变时
     5. 在一次生成vdom
     6. 通过 React Filber【 React 16版本使用 】 算法进行比较，生成patch补丁对象
     7. 根据patch补丁对象重新渲染真实DOM

React Filber 算法是什么？

1. 概念
   • 将一个大的任务分成多个小片，然后执行每一个小片，每一个小片执行时间很短，总时间很长，但是给其他任务提供了可以执行的机会

React 特点

1. 虚拟DOM
2. 组件系统
3. 单项数据流 - 组件系统
4. JSX语法

React

1. 使用

   • 不能直接在浏览器运行，因为它里面有组件系统和jsx
   • 解决： webpack解析组件系统，解析jsx

2. 我们学习的时候： 是直接在脚手架中学习的

3. React脚手架

   • CRA - react官网推荐 【 使用最多的 】
   • 国内的
     • 蚂蚁金服
       • Dva - 守望先锋
       • Umi - 乌米
         • Dva + Node

4. React这个框架的目的是什么？解决前端的什么问题？

   • 高效实现用户输入数据快速展示在界面上
   • 高效实现服务端数据渲染到界面

5. React特征

   • 函数式编程
   • 回归js

CRA

全称 create-react-app

1. 安装

   • 全局安装
     • $ cnpm i crate-react-app -g
     • create-react-app 项目名称
   • 局部安装
     • npx crate-react-app 项目名称

2. 元素

   • React最小组成部分

3. 组件

   1. 函数式组件，函数也可以是一个组件，大大体现： 函数式编程
   2. 组件是由元素构成的
   3. 函数式组件由一个参数props，来接收绑定在组件生成的属性
   4. ** 类组件 **

4. 组件的组合和嵌套

5. React四种样式形式

6. React项目配置sass

7. React中数据的形式

   1. 属性 props
   2. 状态 state

8. props

• 定义形式有两种

  • 外部传入 - 外部传入改变了，那么久改变
  • 内部自己设置 - 不可更改

• 我们更多推荐大家的是使用外部传入，很符合React单项数据流特征

• 注意

  • 属性一旦确定一般不去更改，属性是用来描述组件的特征和特性的
  • 如果想改变只能由外部传入的属性改变

• 属性验证

  • 依靠第三方包： prop-types

9. state

• 定义形式有两种
  • 直接在类中定义
  • 放在类的构造器函数中 constructor 【 推荐 】
• constructor中的 super做了什么？
• React中如何更改state
  • 使用 this.setState()
• 注意
  • 1. 状态只能自己定义，自己修改，别人无权修改

10. setState()

• 参数【 2个 】

  • 第一个参数用来修改状态，可以使函数也可是对象
  • 第二参数是修改完状态执行的回调函数，这里可以完成一些副作用功能
    • 可写可不写

• React中界面的更新需要用setState来完成

• 总结：

  • 有状态的组件就做有状态组件 - 类组件
  • 没有状态的组件叫做无状态组件【 purecomponent 】 - 函数式组件

React中数据如何渲染？

Vue中是通过指令来进行渲染的，比如： v-for v-show v-if

1. 条件渲染
2. 列表渲染
3. 表单绑定

什么时候用类组件？什么时候用函数式组件？

阿里：
如果只是简单的展示样式 -> 函数式组件
如果我们又状态需要管理 -> 类组件

React事件

React组件通信

1. 回顾vue
   1. 父子组件通信 props
   2. 子父组件通信 $emit
   3. 非父子组件通信
      1. ref
      2. bus事件总线
   4. 多组件状态共享 vuex

todolist

1. 增加
2. 删除
3. 修改

引入组件库

https://ant.design/index-cn

1. 类型

   • pc端 - 后台管理系统【 一般 】 [ ant design pro ]
   • 移动端 - app [ antd-mobile ]

2. 开发人员： 蚂蚁金服开发团队

3. 按步骤配置按需引入

4. 测试组件库

5. 封装组件库

   • 基于其他组件库进行二次封装的

学习目标

1. 会读 会写
2. 明白每一个生命周期钩子函数的作用和意义
3. 学习技巧： 借用已经学习过的vue

说明：
生命周期在类组件中使用

函数式组件要使用生命周期咋整？

React 15 vs React 16 [ 扩展 ]

1. 生命周期有区别
   • React15对属性和状态分别使用的是： getDefaultProps 和 getInitalState, 而16版本统一生成constructor
   • React16版本之后新增了一个错误处理阶段： componentDidCatch
2. React 15采用diff算法， React16之后采用filber算法
3. React15使用React.createClass 来创建类组件，而16使用class xx extends Component 来创建类组件

React 16 vs React 17[ 官方 ]

总结：

1. React生命周期16版本

   1. 初始化阶段 - 自动执行

      1. constructor 继承属性 定义状态 绑定事件this
      2. componentWillMount
      3. render 生成vdom 计算 this.props this.state
      4. componentDidMount 数据请求 - 数据修改 - 获取真实DOM

   2. 更新阶段 - 数据改变

      1. componentWillReceiveProps [ 属性改变才执行 ] 接收新属性， 判断组件属性是否改变，可以用于监听
      2. shouldComponentUpdate 性能优化关键钩子函数 ， 控制组件是否要更新
      3. componentWillUpdate
      4. render
      5. componentDidUpdate 获得了更新后的真实dom

   3. 销毁阶段

      1. componentWillUnmount 组件销毁， 善后

   4. 错误处理阶段

      1. componentDidCatch 记录错误信息和错误栈 、
      2. 功能实现降级UI

React动画实现

https://reactcommunity.org/react-transition-group/

React高阶组件 - HOC

1. 全称： Height Order Component
2. 作用：
   1. 将多个组件需要的方法或是组件进行封装，然后复用