React + Ts 项目实践

React

• useEffect、 useCallback、 useMemo 依赖都是浅比较

• useRef： 当做类组件的 this

  •  import React, { useRef } from 'react';
     ​
     function MC() {
       const that = useRef({
         g: 'g'
       })
       // that.current.g -> 'g'
       return null
     }
    复制代码

• useImperativeHandle： 子组件定义抛出的 ref

• useDebugValue: 开发者工具中显示自定义 hook 的标签

• ReactDOM.createPortal：把子节点渲染到对应 DOM 节点

  • 应用场景：弹窗、受到 overflow: hidden z-index 限制

性能优化

• React.memo

• useCallback、 useMemo

• 懒加载：React.lazy + React.Suspense

  •  import React, { Suspense } from 'react';
     ​
     const OtherComponent = React.lazy(() => import('./OtherComponent'));
     ​
     function MyComponent() {
       return (
         <div>
           <Suspense fallback={<div>Loading...</div>}>
             <OtherComponent />
           </Suspense>
         </div>
       );
     }
    复制代码

Ts

谁在用

• React
• Vue3
• Deno

有什么用

• 规范
• 可维护性
• 容错

怎么用

• 多用枚举

  • 可维护性
  • 可读性

   enum TestEnum {
     /**
      * 这是一个测试枚举
      */
     TEST
   }
  复制代码

  

• 箭头函数的泛型

   const fn = <T extends object>(p: T): T => {
     return p
   }
  复制代码

• React 中的 Ts

  • React.FC、React.VFC

    • React.FC 显式地定义了返回类型，其他方式是隐式推导的
    • React.FC 对静态属性：displayName、propTypes、defaultProps提供了类型检查和自动补全
    • React.FC 为 children提供了隐式的类型

     const MyC: React.FC<MyCProps> = (props) => {
       const { children, ...mycProps } = props
     }
     ​
     // 与 FC 少定义了 children
     const MyC: React.VFC<MyCProps> = (props) => {
       const { ...mycProps } = props
     }
    复制代码

  • React.ReactNode、React.ReactElement

    React.ReactNode: 用来定义组件 children

     type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
    复制代码

    React.ReactElement 虚拟 DOM，用来定义一个组件 return 类型

     interface ReactElement<P, T> {
             type: T;
             props: P;
             key: Key | null;
         }
    复制代码

    

  • React.CSSProperties 定义 style 对象

  • useRef 泛型

     const ref = useRef<HTMLSpanElement>(null) // React.RefObject 传递给内置的 ref 属性，绑定 DOM 元素
     const ref = useRef(null) // React.MutableRefObject
     const ref = useRef<HTMLSpanElement>() // React.MutableRefObject
    复制代码

  • Event 类型：React.MouseEvent<HTMLSpanElement> React.ChangeEvent<HTMLInputElement>

  • Handle 类型：React.MouseEventHandler<HTMLSpanElement> React.ChangeEventHandler<HTMLInputElement>

  • 获取组件的 Props：React.ComponentProps<typeof AddAppModel>

    

    

• 工具类型

  • Partial: 将类型 T 中的属性全部变成可选属性
  • Required:将类型 T 中的属性全部变成必填属性
  • Pick<T, K>：从类型T中，选出key为K的属性
  • Omit<T, K>: 从类型T中，过滤key为K的属性
  • Record<K, T>: 返回一个对象类型，以K为key，以T为value
  • Readonly：将类型 T 中的属性全部变成只读
  • Parameters: 输入函数类型，输出函数的参数的类型
  • ReturnType: 输入函数类型，输出函数的返回值的类型
  • Promise: T 泛型变量用于确定 then 方法时接收的第一个回调函数的参数类型

\