docs:更新TS、Vue及React

3 years ago · d162854ef5
3 changed files with 459 additions and 4 deletions
--- a/06.TypeScript.md
+++ b/06.TypeScript.md
@ -0,0 +1,224 @@
 1、什么是TypeScript？
 TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。
 而且TypeScript不存在跟浏览器不兼容的问题，因为在编译时，它产生的都是JavaScript代码。
 2、TypeScript 和 JavaScript 的区别是什么？
 Typescript 是 JavaScript 的超集，可以被编译成 JavaScript 代码。 用 JavaScript 编写的合法代码，在 TypeScript 中依然有效。Typescript 是纯面向对象的编程语言，包含类和接口的概念。 程序员可以用它来编写面向对象的服务端或客户端程序，并将它们编译成 JavaScript 代码。
 TypeScript和 JavaScript的关系
 TypeScript 引入了很多面向对象程序设计的特征，包括：
 interfaces  接口
 classes  类
 enumerated types 枚举类型
 generics 泛型
 modules 模块
 主要不同点如下：
 TS 是一种面向对象编程语言，而 JS 是一种脚本语言（尽管 JS 是基于对象的）。
 TS 支持可选参数， JS 则不支持该特性。
 TS 支持静态类型，JS 不支持。
 TS 支持接口，JS 不支持接口。
 3为什么要用 TypeScript ？
 TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。
 作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。
 TS 非常流行，被很多业界大佬使用。像 Asana、Circle CI 和 Slack 这些公司都在用 TS。
 4、TypeScript 和 JavaScript 哪个更好？
 由于 TS 的先天优势，TS 越来越受欢迎。但是TS 最终不可能取代 JS，因为 JS 是 TS 的核心。
 选择 TypeScript 还是 JavaScript 要由开发者自己去做决定。如果你喜欢类型安全的语言，那么推荐你选择 TS。 如果你已经用 JS 好久了，你可以选择走出舒适区学习 TS，也可以选择坚持自己的强项，继续使用 JS。
 5、什么是泛型？
 泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性。
 可以把泛型理解为代表类型的参数
 // 我们希望传入的值是什么类型，返回的值就是什么类型
 // 传入的值可以是任意的类型，这时候就可以用到 泛型
 // 如果使用 any 的话，就失去了类型检查的意义
 function createArray1(length: any, value: any): Array<any> {
    let result: any = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
 }
 let result = createArray1(3, 'x');
 console.log(result);
 // 最傻的写法：每种类型都得定义一种函数
 function createArray2(length: number, value: string): Array<string> {
    let result: Array<string> = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
 }
 function createArray3(length: number, value: number): Array<number> {
    let result: Array<number> = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
 }
 // 或者使用函数重载，写法有点麻烦
 function createArray4(length: number, value: number): Array<number>
 function createArray4(length: number, value: string): Array<string>
 function createArray4(length: number, value: any): Array<any> {
    let result: Array<number> = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
 }
 createArray4(6, '666');
 //使用泛型
 // 有关联的地方都改成 <T>
 function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
 }
 // 使用的时候再指定类型
 let result = createArray<string>(3, 'x');
 // 也可以不指定类型，TS 会自动类型推导
 let result2 = createArray(3, 'x');
 console.log(result);
 6、TS中的类
 TypeScript 是面向对象的 JavaScript。而其中的类描述了所创建的对象共同的属性和方法。
 传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但这对于熟悉使用面向对象方式的程序员来说有些棘手，因为他们用的是基于类的继承并且对象是从类构建出来的。
 从ECMAScript 2015，也就是ECMAScript 6，JavaScript程序将可以使用这种基于类的面向对象方法。在TypeScript里允许开发者现在就使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，
 7、什么是构造函数，构造函数作用是什么？
 构造函数 ，是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。而TypeScript的构造函数用关键字constructor来实现。可以通过this（和java/C#一样代表对象实例的成员访问）关键字来访问当前类体中的属性和方法。
 8、实例化是什么？
 一般情况下，创建一个类后并不能直接的对属性和方法进行引用，必须对类进行实例化，即创建一个对象。TypeScript中用new 关键字创建对象。实例化后通过“.”来访问属性和方法
 9、方法重写是什么？
 子类可继承父类中的方法，而不需要重新编写相同的方法。但有时子类并不想原封不动地继承父类的方法，而是想作一定的修改，这就需要采用方法的重写
 重写的作用在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。
 10、什么是可索引类型接口？
 一般用来约束数组和对象
 / 数字索引——约束数组
 // index 是随便取的名字，可以任意取名
 // 只要 index 的类型是 number，那么值的类型必须是 string
 interface StringArray {
  // key 的类型为 number ，一般都代表是数组
  // 限制 value 的类型为 string
  [index:number]:string
 }
 let arr:StringArray = ['aaa','bbb'];
 console.log(arr);
 // 字符串索引——约束对象
 // 只要 index 的类型是 string，那么值的类型必须是 string
 interface StringObject {
  // key 的类型为 string ，一般都代表是对象
  // 限制 value 的类型为 string
  [index:string]:string
 }
 let obj:StringObject = {name:'ccc'};
 11、什么是函数类型接口？
 对方法传入的参数和返回值进行约束
 // 注意区别
 // 普通的接口
 interface discount1{
  getNum : (price:number) => number
 }
 // 函数类型接口
 interface discount2{
  // 注意:
  // “:” 前面的是函数的签名，用来约束函数的参数
  // ":" 后面的用来约束函数的返回值
  (price:number):number
 }
 let cost:discount2 = function(price:number):number{
   return price * .8;
 }
 // 也可以使用类型别名
 type Add = (x: number, y: number) => number
 let add: Add = (a: number, b: number) => a + b
 12、什么是类类型接口？
 如果接口用于一个类的话，那么接口会表示“行为的抽象”
 对类的约束，让类去实现接口，类可以实现多个接口
 接口只能约束类的公有成员（实例属性/方法），无法约束私有成员、构造函数、静态属性/方法
 // 接口可以在面向对象编程中表示为行为的抽象
 interface Speakable {
    name: string;
     // ":" 前面的是函数签名，用来约束函数的参数
    // ":" 后面的用来约束函数的返回值
    speak(words: string): void
 }
 interface Speakable2 {
    age: number;
 }
 class Dog implements Speakable, Speakable2 {
    name!: string;
    age = 18;
    speak(words: string) {
        console.log(words);
    }
 }
 let dog = new Dog();
 dog.speak('汪汪汪');
 13、什么是混合类型接口？
 一个对象可以同时做为函数和对象使用
 interface FnType {
    (getName:string):string;
 }
 interface MixedType extends FnType{
    name:string;
    age:number;
 }
 interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
 }
 function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
 }
 let c = getCounter();
 c(10);
 c.reset();
 c.interval = 5.0;
 14、never 和 void 的区别？
 void 表示没有任何类型（可以被赋值为 null 和 undefined）。
 never 表示一个不包含值的类型，即表示永远不存在的值。
 拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。
 15、TS的学前基础？
 因为 TypeScript 是对 JavaScript 的扩展，更准确的说是 ECMAScript。所以，我们学习我们这套 TypeScript 的课程，需要具备 ECMAScript 语言的基础：
 熟悉语法基础（变量、语句、函数等基础概念）
 掌握内置对象（Array、Date 等）的使用
 面向对象基本概念（构造函数、原型、继承）
--- a/07.Vue.md
+++ b/07.Vue.md
@ -29,8 +29,6 @@ Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对
 **Compile（指令解析器）** : Compile主要做的事情是解析模板指令，将模板中变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加鉴定数据的订阅者，一旦数据有变动，收到通知，更新试图
 传送门：☞ [20分钟吃透Diff算法核心原理](https://juejin.cn/post/6994959998283907102#heading-2)
@ -84,12 +82,10 @@ Vue是一个典型的MVVM框架，模型（Model）只是普通的javascript对
 1.当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费 
 2.这种场景建议使用 computed，先对数据进行过滤
 注意：3.x 版本中 `v-if` 总是优先于 `v-for` 生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。
 解惑传送门 ☞ [# v-if 与 v-for 的优先级对比非兼容](https://v3.cn.vuejs.org/guide/migration/v-if-v-for.html#%E6%A6%82%E8%A7%88)
 ### React/Vue 项目中 key 的作用
 -   key的作用是为了在diff算法执行时更快的找到对应的节点，`提高diff速度，更高效的更新虚拟DOM`;
@ -173,6 +169,67 @@ console.log(o);
    Vuex、`$attrs、$listeners` `Provide、inject`
 ### $emit 后面的两个参数是什么
 1、父组件可以使用 props 把数据传给子组件。
 2、子组件可以使用 $emit,让父组件监听到自定义事件 。
 `vm.$emit( event, arg );`//触发当前实例上的事件，要传递的参数
 `vm.$on( event, fn );`//监听event事件后运行 fn； 
 子组件
 ```vue
 <template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
 </template>
 <script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityName: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
 </script>
 ```
 父组件
 ```vue
 <template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
 <template>
 <script>
  export default {
    name:'index',
    components: {},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityName;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
 </script>
 ```
 ### nextTick的实现
 1.  `nextTick`是`Vue`提供的一个全局`API`,是在下次`DOM`更新循环结束之后执行延迟回调，在修改数据之后使用`$nextTick`，则可以在回调中获取更新后的`DOM`；
@ -263,6 +320,18 @@ vue3提出的Composition API旨在解决这些问题【追求完美是要消耗
 具体参考：[vue自定义指令模拟v-model指令](https://blog.csdn.net/qq_39157944/article/details/106262546)
 ### 如何实现 v-model,说下思路
 ### Vue Router 相关
 ### Vuex的理解及使用场景
 Vuex 是一个专为 Vue 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。
--- a/08.React.md
+++ b/08.React.md
@ -365,3 +365,165 @@ React并不是将click事件绑在该div的真实DOM上，而是`在document处
 另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 `event.preventDefault`。
 ![react事件绑定原理](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2089718f74b342869de15f01588f033f~tplv-k3u1fbpfcp-zoom-1.image)
 ### React.lazy() 实现的原理
 React的懒加载示例：
 ```js
 import React, { Suspense } from 'react';
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
 }
 ```
 **React.lazy 原理**
 以下 React 源码基于 16.8.0 版本
 React.lazy 的源码实现如下：
 export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
  let lazyType = {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor,
    // React uses these fields to store the result.
    _status: -1,
    _result: null,
  };
  return lazyType;
 }
 可以看到其返回了一个 LazyComponent 对象。
 而对于 LazyComponent 对象的解析：
 ```js
 case LazyComponent: {
  const elementType = workInProgress.elementType;
  return mountLazyComponent(
    current,
    workInProgress,
    elementType,
    updateExpirationTime,
    renderExpirationTime,
  );
 }
 ```
 ```js
 function mountLazyComponent(
  _current,
  workInProgress,
  elementType,
  updateExpirationTime,
  renderExpirationTime,
 ) { 
  ...
  let Component = readLazyComponentType(elementType);
  ...
 }
 ```
 ```js
 // Pending = 0, Resolved = 1, Rejected = 2
 export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
  const status = lazyComponent._status;
  const result = lazyComponent._result;
  switch (status) {
    case Resolved: {
      const Component: T = result;
      return Component;
    }
    case Rejected: {
      const error: mixed = result;
      throw error;
    }
    case Pending: {
      const thenable: Thenable<T, mixed> = result;
      throw thenable;
    }
    default: { // lazyComponent 首次被渲染
      lazyComponent._status = Pending;
      const ctor = lazyComponent._ctor;
      const thenable = ctor();
      thenable.then(
        moduleObject => {
          if (lazyComponent._status === Pending) {
            const defaultExport = moduleObject.default;
            lazyComponent._status = Resolved;
            lazyComponent._result = defaultExport;
          }
        },
        error => {
          if (lazyComponent._status === Pending) {
            lazyComponent._status = Rejected;
            lazyComponent._result = error;
          }
        },
      );
      // Handle synchronous thenables.
      switch (lazyComponent._status) {
        case Resolved:
          return lazyComponent._result;
        case Rejected:
          throw lazyComponent._result;
      }
      lazyComponent._result = thenable;
      throw thenable;
    }
  }
 }
 ```
 注：如果 readLazyComponentType 函数多次处理同一个 lazyComponent，则可能进入Pending、Rejected等 case 中。
 从上述代码中可以看出，对于最初 React.lazy() 所返回的 LazyComponent 对象，其 _status 默认是 -1，所以首次渲染时，会进入 readLazyComponentType 函数中的 default 的逻辑，这里才会真正异步执行 import(url)操作，由于并未等待，随后会检查模块是否 Resolved，如果已经Resolved了（已经加载完毕）则直接返回moduleObject.default（动态加载的模块的默认导出），否则将通过 throw 将 thenable 抛出到上层。
 为什么要 throw 它？这就要涉及到 Suspense 的工作原理，我们接着往下分析。
 **Suspense 原理**
 由于 React 捕获异常并处理的代码逻辑比较多，这里就不贴源码，感兴趣可以去看 throwException 中的逻辑，其中就包含了如何处理捕获的异常。简单描述一下处理过程，React 捕获到异常之后，会判断异常是不是一个 thenable，如果是则会找到 SuspenseComponent ，如果 thenable 处于 pending 状态，则会将其 children 都渲染成 fallback 的值，一旦 thenable 被 resolve 则 SuspenseComponent 的子组件会重新渲染一次。
 为了便于理解，我们也可以用 componentDidCatch 实现一个自己的 Suspense 组件，如下：
 ```js
 class Suspense extends React.Component {
  state = {
    promise: null
  }
  componentDidCatch(err) {
    // 判断 err 是否是 thenable
    if (err !== null && typeof err === 'object' && typeof err.then === 'function') {
      this.setState({ promise: err }, () => {
        err.then(() => {
          this.setState({
            promise: null
          })
        })
      })
    }
  }
  render() {
    const { fallback, children } = this.props
    const { promise } = this.state
    return <>{ promise ? fallback : children }</>
  }
 }
 ```
 至此，我们分析完了 React 的懒加载原理。简单来说，React利用 React.lazy与import()实现了渲染时的动态加载 ，并利用Suspense来处理异步加载资源时页面应该如何显示的问题。
 参考传送门☞ [React Lazy 的实现原理](https://thoamsy.github.io/blogs/react-lazy/)