复习React

玩犊子
144 阅读5分钟

一.基础回顾

事件

bind this
关于event参数
      event是SyntheticEvent，模拟出来DOM事件所有能力
      event.nativeEvent是原生事件对象
     所有的事件都被挂载document上
      和DOM事件不一样,和Vue事件也不一样 
传递自定义参数

表单

受控组件 类似于VUE 双向绑定 但不是

组件使用

  • props传递数据
  • props传递函数
  • props类型检查

setState

不可变值***

可能是异步更新

  • setState直接用累加器 setState是异步的
  • 在在setTimeout里面setState却是同步的
  • 在自定义DOM事件,setState是同步的

可能会被合并

  • 对象会被合并
  • 函数不会合并

组件生命周期

1生命周期.png

React高级特性

函数组件

  • 纯函数,输入props，输出JSX
  • 没有实例,没有生命周期,没有state
  • 不能扩展其他方法 1-1.png

非受控组件

  • ref

  • defaultValue defaultChecked

  • 手动操作DOM元素

  • 比如:通过创建ref绑定 input元素 再通过事件拿到input元素的里面的值进行操作

      使用场景
  	必须手动操作DOM元素,setState实现不了
  	文件上传<input type=file>
  	某些富文本编辑器,需要传入DOM元素
  受控组件和非受控组件
  	优先使用受控组件,符合React设计原则
  	必须操作DOM时,再使用非受控组件

Portals

使用场景:

  • overflow:hidden
  • 父组件z-index值太小
  • fixed需要放在body第一层级

异步组件

异步加载组件：

  • import()
  • React.lazy
  • React.Suspense

性能优化

shouldComponentUpdate

1-2.png React默认：父组件有更新,子组件无条件更新

性能优化对于React更加重要

SCU一定要每次都用吗？——需要的时候才优化

使用总结:

  • SCU默认返回true，即React默认重新渲染所有子组件
  • 必须配"不可变值"一起使用
  • 可先不用SCU，有性能问题时再考虑使用

pureComponent(纯组件)和React.memo

  • pureComponent,SCU中实现了浅比较
  • memo,函数组件中的PureComponent
  • 浅比较已经使用大部分情况(尽量不要做深度比较)

不可变值immutabel.js

  • 彻底拥抱"不可变质"
  • 基于共享数据(不是深拷贝)
  • 有一定学习和迁移成本,按需使用

1-4.png

高阶组件(公共组件抽离)

高阶组件(HOC)是接受一个组件并返回一个新组件的函数，基本上这是一个模式是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。 1-5.png

Render Props

1-6.png

HOC vs Render Props

  • HOC:模式简单,但会增加组件层级
  • Render Props:代码简洁,学习成本高
  • 按需使用

二.Redux

基本概念

  • store state
  • action
  • reducer 自我理解:创建store来存放状态 然后发布订阅 dispatch派发action 到reducer 然后里面进行判断

单项数据流

  • 单项数据流概述
  • dispatch(action)
  • reducer->newState
  • subscribe触发通知

1-9.png

react-redux

  • Provider
  • connect
  • mapStateToprops mapDispatchToProps

异步action

  • thunk
  • promise
  • saga

中间键

1-8.png

三.React原理

函数式编程

  • 一种编程范式,概念比较多
  • 纯函数
  • 不可变值

vdom和diff

  • h函数
  • vdom数据结构
  • patch函数

1-10.png 回顾：

  • 只比较同一层级,不跨级比较
  • tag不相同,则直接删除掉重建
  • tag和key，两者都相同,则认为是相同节点,不再深度比较

jsx本质

  • JSX等同于Vue模板
  • Vue模板不是html
  • JSX也不是JS

合成事件

所有事件挂载到document上

event不是原生的,是SyntheticEvent合成事件对象

和Vue事件不同,和DOM事件也不同

1-11.png 为何要合成事件机制？

  • 1.更好的兼容性和跨平台
  • 2.挂载到document，减少内存泄漏，避免频繁解绑
  • 3.方便事件的统一管理(如事务机制)

setState batchUpdate：

1-12.png

setState是异步还是同步的?

看是否能命中batchUpdate机制

(哪些能命中 1.生命周期(和它调用的函数) 2.React中注册的事件(和它调用的函数) 3.React可以“管理”的入口 )

（不能命中：1.setTimeout setInterval等 2.自定义的DOM事件 3.React“管不到”的入口） 判断isBatchingUpdates

组件渲染和更新过程：

  • props state
  • render()解析JSX的结构生成vnode
  • patch(elem,vnode)

性能优化解决方案fiber（涉及底层）

  • 将reconciliation阶段进行任务拆分(commit无法拆分)
  • DOM需要渲染时暂停，空闲时恢复
  • window.requestIdleCallback

四.真题演练

组件之间如何通讯?

父子组件props
自定义事件
Redux和Context

JSX本质是什么?

createElement
执行返回vnode

Context是什么,如何应用?

父组件,向直下所有子孙组件传递信息
如一些简单的公共信息:主题色、语言等
复炸的公共信息,请用redux

shouldComponentUpdate用途？

性能优化
配合不可变值一起使用,否则会出错

redux单项数据流？

1-9.png

什么是纯函数?

返回一个新值、没有副作用（不会“偷偷”修改其他值）
重点:不可变值

React发起ajax应该再哪个生命周期？

componentDidMount

渲染列表,为何使用key?

diff算法中通过tag和key来判断,是否是sameNode
减少渲染次数,提高渲染性能

函数组件和class组件区别？

纯函数,输入props,输出JSX
没有实例,没有生命周期,没有state
不能扩展其他方法

什么是受控组件?

表单的值,受state控制
需要自行监听onChange,更新state

何时使用异步组件?

加载大组件
路由懒加载

多个组件有公共逻辑,如何抽离?

高阶组件
Render Props

redux如何进行异步请求?

使用异步action
redux-thunk

PureComponent有何区别？

实现了浅比较的shouldComponentUpdate
性能优化
但要结合不可变值使用

React事件和DOM事件的区别？

所有事件挂载到document上
event不是原生的,是SyntheticEvent合成事件对象
里面还有dispatchEvent机制

React性能优化？

渲染列表时加KEY
自定义事件、DOM事件及时销毁
合理使用异步组件
减少bind this的次数
合理使用SCU PureComponent和memo
合理使用Immutable.js

React和Vue的区别？

都支持组件化
都是数据驱动视图
都使用VDOM操作DOM

不同点:

React使用JSX拥抱JS, VUE使用模板拥抱html

React函数式编程, Vue声明式编程

avatar
文章
阅读
粉丝