枚举

// 一般枚举
enum ALL_PERSON {
  TOM,
  JAKE,
}

// 字符串枚举
enum ALL_PERSON {
  TOM = 'TOM',
  JAKE = 'JAKE',
}

console.log(ALL_PERSON.TOM) // 'TOM'

匿名函数组件 funciton

import React, { useState, useRef, useMemo, PropsWithChildren } from 'react'

interface IProps {}

// 用 PropsWithChildren 把 children 放进去

function Index(props: PropsWithChildren<IProps>): React.ReactNode {
  const [value, setValue] = useState<string>('') 
  const nameInput = useRef<HTMLInputElement>(null)

  const calculatedValue = useMemo<number>(() => 123, []) // 泛型

  // onchange
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value)
    setValue(e.target.value)
  }

  return (
    <>
      <input value={value} onChange={onChange} />
    </>
  )
}
export default Index

React.FC 里边已经包含children了

interface IProps {
  name?: string
}

const Index: React.FC<IProps> = (props) => {
  console.log(props.name) // props.children?
  return <>test2</>
}
export default Index

forwardRef

React.forwardRef<T, P = {}>只需要传props的类型和ref的类型，第一个T是ref的类型，P是props的类型

import React, { forwardRef, ForwardRefRenderFunction } from 'react'

interface AppProps {}

const App: React.FC<AppProps> = (props, ref) => {
  return <div>123</div>
}
export default forwardRef<HTMLDivElement, AppProps>(App as ForwardRefRenderFunction<HTMLDivElement>)