ts + hook

即日起记录ts、hook开发过程中的点滴

hook useState

问题描述：异步导致数据更新不及时
解决方案：useEffect + setTimeout

const onChange = (activeKey: string) => {
  setSlectKey(activeKey)
  form.setFieldsValue({env: activeKey})
  addForm.setFieldsValue({env: activeKey})
}
useEffect(() => {
    setTimeout(() => onChange, 0)
}, [])

Modal 弹窗使用Form组件时，使用useState 赋值是无法同步拿到值的，initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新

react 本身常用类型

无状态组件、函数的类型定义 FunctionComponent 简写 FC

interface TestProps {
  id: number,
  name: string
}
const Test: React.FC<props: TestProps> = () => {
  const { id, name } = props
  return (<></>)
}

有状态组件、Component || PureComponent

class Test extends Component<TestProps, TestState> {}

FormEvent、react form 表单event类型，正常结合antd的Form表单使用

<form onSubmit= {(e:FormEvent) => {}}

ChangeEvent、react onChange事件触发的event类型

<input value={} onChange={(e: ChangeEvent<HTMLInputElement>) => {}} />

合成事件

  <button onClick={(e:SyntheticEvent<Element, Event>)=>{}}></button>
  <input onChange={(e:SyntheticEvent<Element, Event>)=>{}}/>
  <form
      onSubmit={(e: SyntheticEvent<Element, Event>) => {}}
      onBlur={(e: SyntheticEvent<Element, Event>) => {}}
      onKeyUp={(e: SyntheticEvent<Element, Event>) => {}}
  >
  </form>

useRef MutableRefObject 泛型接口，接收一个参数，参数可以为T类型即任意类型

onst prctureRef: React.MutableRefObject<any> = useRef();

useState

const [isShowAdd, setIsShowAdd] = useState<boolean>(false);

ReactElement、ReactNode、JSX.Element

• ReactElement 是一个接口，包含type、props、key三个属性值，该类型的变量值只能是两种null或者ReactElement 实例
• ReactNode 是一种联合类型，可以是string、number、boolean、ReactElement、{}等
• JSX.Element 是 ReactElement的子类型，没有新增的属性。

JSX.Element ≈ ReactElement ⊂ ReactNode