2022年1月

第一周

资料：

• https://www.bilibili.com/video/BV1J3411r7Mw?p=12&spm_id_from=pageDriver
• https://www.bilibili.com/video/BV1jU4y157Jx?p=1

知识总结：

• v-for 建议搭配key

• key属性必须是唯一的值

• 系统会给一个未赋值的变量自动赋值为undefined，类型也是undefined

• 函数没有传入实参时，参数为undefined

• 函数没有返回值时，默认返回undefined

• undefined既是一个原始数据类型，也是一个原始值数据

• undefined是全局对象上的一个属性window.undefined

• undefined不可写writable: false

• undefined不可配置configurable: false

• undefined不可枚举enumerable: false

• undefined不可重新定义defineProperty

• 全局下，undefined无法作为一个变量使用

• 局部作用域下，undefined可以作为一个变量使用，说明undefined不是JS的保留字和关键字

• void(0) === undefined

• 全局作用域下的this是全局对象this === window

• web的全局对象有：window,self,frames

• node的全局对象有：global

• worker的全局对象有：self

• globalThis可以拿到不同环境下的全局对象

• 函数内部还没实例化的this指向window

• 全局范围的this指向window

• 预编译函数this指向window

• apply/call改变this指向

• 构造函数的this指向实例化对象

• 默认调用iterator接口的场合：

  • ...拓展运算符
  • for of
  • Array.from()
  • map
  • set
  • Promiss.all()
  • yeild

第二周

资料：

• https://www.bilibili.com/video/BV1jU4y157Jx?p=1

知识总结：

• 问题：Promise是什么？
• 是一个异步问题同步化解决方案
• 问题：Promise存在的意义是什么？
• 是一个异步问题同步化解决方案，目的为了把异步任务(如ajax请求)，实现同步化之后避免会堵塞后面的程序并拿到结果，顺便解决回调地狱
• 问题：Promise是如何设计的？
• 设计为Promise执行是同步而promise.then()是异步执行的
• 问题：为什么Promise执行是同步而promise.then()是异步执行的？
• 如果promise.then()是同步执行时是不合理的，且会阻塞下面程序的执行
• 问题：为什么需要用到面向切片编程思想？
• 在程序中时常用到的某些程序步骤，阶段，片段抽离出来于本身的程序逻辑隔离
• 面向切片应用：埋点，性能监控，node文件读写
• 问题：有什么场景需要用到Function?
• 构造的Function函数在一些底层源码中有实现，如渲染函数中字符串代码生成一个渲染的函数
• 问题：为什么需要重写ES5中的方法？
• 在老的项目中(国家单位，银行，政府网站等)是在低版本IE浏览器里用ES3实现的，对ES5不兼容，所以要写成ES3能兼容的方法，能在老的项目中跑起来

• 问题：重写的方法有哪些？

  • forEach
  • map
  • filter
  • reduce
  • reduceRight
  • every
  • some
  • deepClone

第三周

资料：

• https://ke.qq.com/webcourse/334138/100396581#taid=3885463639497018&vid=5285890795805497846

知识整理：

• 什么是TypeScript?
• JavaScript和类型系统的结合

• 类型系统是什么？

  • 在开发过程中找错
  • 使用类型注解来分析代码
  • 仅存在于开发阶段
  • 不会提供性能优化
• 什么是类型？
• 一个方便描述一个具有相应的属性和方法的值的东西
• 什么是值？
• 是用户能够赋值给变量的东西，在TypeScript中，不同的值有不同的类型
• 如何描述一个值？
• 通过字符串/数值/布尔值/对象等类型去描述一个值，也可以通过接口interface去自定义一个新的类型去描述一个值
• 为什么要用类型？
• 能够帮助TypeScript编译器分析代码
• 能够帮助其他开发者理解整个代码库里存在的值是什么东西
• 如何让TypeScript编译器认为不同的值对应着不同的类型？
• 通过对象类型去完成，而不能通过元类型去完成
• 使用TypeScript有什么副作用？
• 无论我们是不是想要，它都会自动帮值设定一个类型，它借助类型检测代码是否存在输入问题
• 什么是类型注解？
• 开发者主动告诉TypeScript某个值的类型是什么
• 什么是类型推断？
• TypeScript尝试去推断值的类型(被动)
• 什么时候使用类型注解？
• 当一个函数返回any类型，但是我们想要明确具体类型
• 当某一行声明变量了之后，在另一行进行初始化
• 当我们想要一个变量拥有一个不能推断出来的类型
• 什么时候使用类型化数组？
• 一旦需要记录一些相似类型记录的数据结构
• 为什么要用元组？
• 在程序里面，使用元组的数据类型比较少，但特殊场景会用到，跟CSV文件打交道时会用到
• 使用元组会有什么缺点？
• 会丢失很重要的信息
• 什么时候使用类？
• 跟接口一样，在TypeScript中，大量使用接口，为了不同文件里面的类进行一个配合工作
• 什么叫修饰符？
• 一些关键字public,private,protected，为了限制类里面不同属性和方法的访问
• 为什么要使用修饰符？
• 限制访问防止开发者错误的调用方法导致程序的破坏
• 什么是类型定义文件？
• 通过类型定义文件检测JS库中是否含有符合TS程序所需要的包文件
• 什么时候用typeof? 什么时候用instanceof?
• 原始值像string/boolean/number/symbol类型用typeof
• 引用值用intanceof

第四周

资料：

https://ke.qq.com/webcourse/334138/100396581#taid=3345457401370938&vid=5285890818667111602

知识整理：

• React的主观意愿是什么？

• React仅仅是负责View层渲染

• React是一个视图渲染的工具库，不做框架的事情，不做自定义指令，不做数据类型强处理

• React是什么？

• 构建用户界面的JavaScript库

• React提供了ReactAPI专门处理视图的API集合

• ReactDOM: 从render函数到虚拟DOM节点到真实DOM节点需要用的库

• 关于React组件：

• 继承React.Component

• render函数返回视图

• JSX是什么？

• 是一种标签语法，在JavaScript基础上的语法扩展，既有HTML XML的形态，又有JavaScript的逻辑

• 不是字符串，不是HTML标签

• 是描述UI呈现与交互直观的表现形式

• 生成React元素

• 为什么React不区分开视图和逻辑？

• 渲染和UI标记是有逻辑耦合的

• 即使是这样的耦合，也能实现关注点分离

• JSX插值表达式是什么？

• 一切有效的(符合JS编程逻辑的)表达式都写在{}里面，JSX有编译过程，被编译以后转化成React元素，实际上是一个普通的对象

• React基本的更新逻辑有哪些？

• React元素是不可变的对象

  • 不能添加属性
  • 不能修改属性
  • 不能删除属性
  • 不能枚举

• 组件是什么？

• 在前端，组件是视图的片段，组件包含视图标记，事件，数据，逻辑，外部的配置

• 数据是什么？

• 组件一般是内部管理数据集合(状态)，外部传入配置集合(props)

• 组件渲染的过程：

  1. React主动调用组件
  2. 将属性集合转换成对象
  3. 将对象作为props传入组件
  4. 替换JSX中的props或者state中的变量
  5. ReactDOM将最终React元素通过一系列的操作转化成真实DOM进行渲染

• 组件调用规范：

  • 视图标记时HTML标签
  • 大驼峰写法作为一个React元素
  • 组件转换React元素

• 组合组件：

• 视图标记时HTML标签

• 大驼峰写法作为一个React元素

• 组件转换React元素

• 属性props和数据状态state的区别：

• state叫数据池对象，组件内容的管理数据的容器，可写读

• props叫配置池对象，外部使用(调用)组件时ReactDOM.render第二参数传入的属性集合，组件内部只读

• 为什么属性props对象不可写(会报错)？

• 组件内部是不应该有权限修改的组件外部的数据

• state总结：

• 如果想使用组件的时候，传入数据props组件配置

• 如果是组件使用的数据，使用私有数据状态state

• state注意事项：

  1. 必须使用setState方法来更改state
  2. 多个setState是会合并调用
  3. props和state更新数据要谨慎，避免直接依赖他们，他们俩很有可能是在异步程序中更新的
  4. setState操作合并的原理是浅合并

• 关于组件中的state：

  • state是组件内部特有的数据封装
  • 其他组件时无法读写修改该组件的state
  • 组件可以通过其他组件调用的时候传入属性来传递state的值
  • props虽然是响应式的，但在组件内部是只读的，所以仍然无法修改其他组件的state
  • 安全影响范围：state只能传递给自己的子组件，说明state只能影响当前组件的UI的内部的UI
  • 组件可以没有状态，有没有状态，组件间都不受嵌套影响，有无状态是可以切换的

• 为什么React要将事件处理直接在React元素上绑定？

• React一直认为事件处理跟视图是有程序上的直接关系的，事件处理和视图写在一起可以更加直观的表述视图与逻辑的关系，更加好维护

• 解决办法：

  1. 可以在构造器中bind(this)
  2. 可以在视图中bind(this)
  3. 利用回调加箭头函数onClick= { ()=> this.doSth() }

• 列表渲染中关于key值：

  • 列表中的每个子元素都必须一个唯一的key属性值
  • key是React查看元素是否改变的一个唯一标识
  • key必须在兄弟节点中唯一，确定的(兄弟结构是在同一列表中的兄弟元素)
  • 不建议使用index作为key值
  • 建立在列表顺序改变，元素增删的情况下
  • 列表项增删或顺序改变，index的对应项就会改变
  • key对应的项还是之前列表情况的对应元素的值
  • 导致状态混乱，查找元素性能会变差

解决做法：

• 如果列表是静态不可操作的，可以选择index作为key，也不推荐
• 有可能这个列表在以后维护的时候有可能变更为可操作的列表
• 避免使用index
• 可以用数据的ID
• 使用动态生成一个静态ID 如通过包nanoid

注意：

• key是不会作为属性传递给子组件的，必须显示传递key
• 防止开发者在逻辑中对key值进行操作
  • 什么是受控组件？

• 控制表单输入行为取值的方式的组件，跟input表单相关的渲染数据必须保存在自己的state数据里

• 受控组件和非受控组件的区别：

  • 受控组件：

    • 视图表单数据受控于state状态数据组件
    • 控制表单操作并且同步state
  • 非受控组件：视图表单数据是只读的

• 什么是非受控组件？

• 不受控于state, 使用React中的ref从DOM节点中获取表单数据得到组件

• 如何不通过state数据状态去保存表单标签里面的值？

• 通过ref可以保存 ,在标签里定义ref="xxxRef"， 通过this.refs.xxx.value访问到保存的值
  也可以创建引用挂载到视图上React.createRef()

• 为什么JSX还可以通过props传递视图React元素？

• JSX本质上都会转成React元素(Object对象)，视图通过props传递的机制比较像vue的插槽，但是React没有插槽的概念的定义，React本身就允许props传递任何类型的数据到子组件

• 组件如何做继承关系？

• React目前还没有发现有需要组件继承的需求，因为通过children或者传递视图React元素的方式完全可以解决组件组合的问题，props可以传递任何类型的数据，所以组合的方式完全可以替代继承方案

• 如何处理逻辑部分需要继承性或者公用性？

• 这个需要开发者自己去写逻辑抽离的模块，函数，类，单独进行模块导入使用