Saga、Core-FE、React、JavaScript、TypeScript学习笔记

TypeScript

• 基本数据类型

  备注：项目中最好定义类型 any形式一般不用

• private、public、project set()/get()的使用

  get()/set() 用于获取私有值

• 泛型

  作用：可以指定传入的类型 方便使用

• interface

  interface SquareConfig {
      color?: string;
      width?: number;
      [propName: string]: any;    //后期可自定义 属性名；  自定义的属性名类型必须为 string 或 number；val值得类型随意
  }
  复制代码

• 接口

  在接口的某个属性上加个 “?” ，表明不需要强制匹配该属性

  interface Person{
    name: string;
    age?: number;
    [propName:string]:string | number;   //任意属性
    readonly id: number  //只读属性
  }
  
  let name: string | number = '';   //联合类型。数据类型可以为：字符串 或 数字
  复制代码

类组件 –复杂的逻辑用这个

• redux
• dispatch

函数组件/钩子函数 –简单的逻辑

• hook

  useEffect() 是hook的事件监听 useState() 更新state

• useSelector 用于拿取 store 的数据

Redux

• 使用 connect() 将 业务层和逻辑层 连接

• dispatch（） 与actions使用 在视图层中与业务层的方法形成连接

yield

• yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字。

• yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。

• yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。

Redux 学习比较【阮一峰】

store、state、action

• store：保存数据的地方。

• state：对象包含所有数据。一个state对应一个View；只要state相同，view就相同

• action：就是view发出的通知，表示state要发生变化了。【state变化会导致view发生变化。state的变化必须是view导致的】

  Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考

• store.dispatch() 是view发出action的唯一方法

  接收action对象作为参数

• reducer：store收到action以后，必须给出一个新的state，这样View才会发生变化。这种state的计算过程叫reducer

  reducer：是一个函数；接收：Action和当前的State作为参数；

  reducer：是一个纯函数

• Store提供的3个方法

  1、store.getState()
  2、store.dispatch()
  3、store.subscribe()
  复制代码

累计

• react 字符串比较使用 “===” 【3个等号】，而不是“==” 【两个等号】

• 项目中，复杂 、共用的写在业务层中，用Redux存储数据；简单、View视图等状态直接在View层中写，无需使用Redux进行存储

代码注意事项

• 文件、方法命名语义化，零注释【即通过文件名、方法名可找到对应功能模块】

• 常亮定义：使用 大写形式，例如下：

  export const LOAD_RELATED_OPTION = “LOAD_RELATED_OPTION”;

• 变量命名使用小写字母开头

• 没有数据变化，只设计到UI层的，不需要使用 Redux 的形式

• Table组件，需要把 rowKey 字段加上(antd的Table 中的rowKey要写，并且要是唯一值，否则会出现奇奇怪怪的问题)

• ** 表示乘方【几次方】；* 表示乘

• Core-FE的setState 的赋值，需要与SagaGenerator一起使用

• 建议多函数【即每个函数建议不超过10行】

• 按issue提交代码并且完成对应功能

• 注意事项：

  对于 FC Component, 最好遵照这样的顺序来排列内容：
  1. useState, useSelector
  2. useEffect
  3. 方法或变量声明（包括 useCallback/useMemo)
  复制代码

• useEffect的用法备注

  useEffect(()=>{},[])     //是生命周期，只有首次加载时，会执行一次
  
  useEffect(()=>{},[aa])   //事件监听，相当于 监听 aa 值改变
  复制代码

JS累计

• map

  map() 需要return 将值返回
  例：
  item.map((item, index) => {
  	return ...;
  })
  复制代码

• foreach

  forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。

  （译注：此处说法可能不够明确，具体可参考EMCA语言规范：

  forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.

  即 forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。）

  例：
  orginData.foreach((item, index) => {
  	item.name = "111";
  })
  复制代码

• concat()

  concat() 需要用一个变量去接收
  例：
  let concatData: string[] = [];
  orginData.foreach((item, index) => {
  	concatData = concatData.concat(["11", "22", "33"]);
  })
  复制代码

• 技术点：immer

  Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 proxy，几乎以最小的成本实现了 js 的不可变数据结构，简单易用、体量小巧、设计巧妙，满足了我们对JS不可变数据结构的需求。

  例：
  import {producer} from "immer";
  let currentState = {
    p: {
      x: [2],
    },
  }
  let preducerData = producer(currentState, item => {
  	item.p.x = 3;
  })
  
  复制代码

  备注：

  ​ 使用前先yarn add immer

• 不刷新页面的情况下，修改URL的值：

  window.location.search = "";
  复制代码

• useBinaryAction

  const getItemNumberDetail = useBinaryAction(actions.getItemNumberDetail);
  
  备注：2个参数
  
  复制代码

• useLoadingStatus

  const loading = useLoadingStatus(LOAD_ITEM_LIST);
  
  复制代码

• useSelector

  import {useSelector} from "react-redux";
  
  const {bomItems} = useSelector((state: RootState) => state.app.commonStock);
  
  复制代码

• useUnaryAction

  const search = useUnaryAction(actions.search);
  
  备注：1个参数
  
  复制代码

• useAction

  const loadAttribute = useAction(actions.loadAttribute);
  
  备注： 无参数
  
  复制代码