import React from 'react';

// 聲明組件接收的屬性類型
interface AaaProps {
  name: string; // 必傳字符串
  age?: number; // 可選數(shù)字
  content: React.ReactNode; // 接收J(rèn)SX/文本等內(nèi)容
}

// 函數(shù)組件約束Props類型
const Aaa: React.FC<AaaProps> = (props) => {
  return <div>姓名：{props.name}，內(nèi)容：{props.content}</div>;
};

// 父組件使用：類型不匹配會(huì)直接報(bào)錯(cuò)
export default function App() {
  return <Aaa name="張三" content={<div>Hello TS</div>} />;
}

React.Node > React.Element > JSX.Element

import React, { useState } from 'react';

export default function App() {
  // 自動(dòng)推導(dǎo)：num為number類型，setNum為Dispatch<SetStateAction<number>>
  const [num, setNum] = useState(0);
  
  // 手動(dòng)聲明：初始值為undefined，指定num為number類型
  const [count, setCount] = useState<number>();
  
  return <div>num: {num}</div>;
}

import React, { useRef, useEffect } from 'react';

export default function App() {
  // 聲明ref為HTMLInputElement類型，初始值null
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // 非空斷言+DOM操作：自動(dòng)提示input的方法（如focus）
    inputRef.current?.focus();
  }, []);
  
  return <input type="text" ref={inputRef} />;
}

import React, { useRef } from 'react';

export default function App() {
  // 聲明ref緩存對(duì)象類型
  const dataRef = useRef<{ num: number }>(null);
  dataRef.current = { num: 100 }; // 類型匹配才允許賦值
  
  return <div>App</div>;
}

import React, { useReducer } from 'react';

// 聲明state類型
interface Data {
  result: number;
}

// 聲明action類型
interface Action {
  type: string;
  num: number;
}

// reducer函數(shù)：約束入?yún)⒑头祷刂殿愋?
function reducer(state: Data, action: Action) {
  switch (action.type) {
    case 'add':
      return { result: state.result + action.num };
    case 'minus':
      return { result: state.result - action.num };
    default:
      return { result: 0 }; // 兜底避免返回值類型不明確
  }
}

export default function App() {
  // useReducer類型自動(dòng)推導(dǎo)：state為Data類型，dispatch匹配Action類型
  const [res, dispatch] = useReducer(reducer, { result: 0 });
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'add', num: 2 })}>加</button>
      <button onClick={() => dispatch({ type: 'minus', num: 1 })}>減</button>
      <div>結(jié)果：{res.result}</div>
    </div>
  );
}

import React, { useMemo, useCallback, memo } from 'react';

export default function App() {
  const [res, dispatch] = useReducer(reducer, { result: 0 });
  
  // useMemo：緩存值，僅依賴項(xiàng)變化時(shí)重新計(jì)算
  const count = useMemo(() => {
    return res.result * 10;
  }, [res.result]); // 依賴res.result，避免無(wú)效計(jì)算
  
  // useCallback：緩存函數(shù)，避免組件更新時(shí)函數(shù)重創(chuàng)建
  const handleClick = useCallback(() => {
    console.log('緩存的函數(shù)');
  }, []); // 空依賴：組件更新時(shí)函數(shù)不重新創(chuàng)建
  
  // 結(jié)合memo優(yōu)化子組件：只有props變化時(shí)重新渲染
  const Child = memo((props: { cb: () => void }) => {
    return <button onClick={props.cb}>點(diǎn)擊</button>;
  });
  
  return <Child cb={handleClick} />;
}

import React, { useRef, useEffect, forwardRef } from 'react';

// 聲明子組件：ForwardRefRenderFunction<HTMLInputElement> 約束ref類型
const Child: React.ForwardRefRenderFunction<HTMLInputElement> = (props, ref) => {
  // 將ref轉(zhuǎn)發(fā)給內(nèi)部input
  return <input type="text" ref={ref} />;
};

// 包裝子組件，實(shí)現(xiàn)ref轉(zhuǎn)發(fā)
const WrapChild = forwardRef(Child);

export default function App() {
  // 聲明ref為input元素類型
  const inputRef = useRef<HTMLInputElement>(null);
  
  useEffect(() => {
    // 父組件可直接操作子組件的input DOM
    inputRef.current?.focus();
  }, []);
  
  return <WrapChild ref={inputRef} />;
}