CSS解决字符串中包含“\n”换行符，显示成换行效果
例：
const str = "333333333333333333333\n2.test 22 \n3.test 3 \n4.test 4";
<span style={{whiteSpace: "pre-line"}}>{str}</span>
- 知识点
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
pre-line: 连续的空白符会被合并。在遇到换行符或者[`<br>`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/br)元素，或者需要为了填充「行框盒子([line boxes](https://www.w3.org/TR/CSS2/visuren.html#inline-formatting))」时会换行。
当天0点转成UTC时间
const startTimeFrom = new Date(moment(moment().format("YYYY-MM-DD")).utc().format());
//例："2022-01-26T16:00:00.000Z"
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); 备注： 无参数
