搭建項(xiàng)目

創(chuàng)建基于typescript的react項(xiàng)目：create-react-app react-travel --template typescript
安裝依賴：npm install typescript-plugin-css-modules --save-dev

問(wèn)題

1.按照官網(wǎng)在index.tsx中引入antd出錯(cuò)？

出錯(cuò)時(shí)因?yàn)槁窂絾?wèn)題：官網(wǎng)中是：import 'antd/dist/antd.css';,但是在依賴目錄中沒(méi)有antd.css文件，只有reset.css，所以改變路徑即可：
import 'antd/dist/reset.css';

2.typescript中如何使用react-router

1. react-router并沒(méi)有提供原生typescript的支持，所以我們需要安裝react-router的類型定義，
   npm install --save-dev @types/react-router-dom
   typescript的支持我們只在開(kāi)發(fā)過(guò)程中使用，所以安裝的開(kāi)發(fā)依賴中-dev（結(jié)余上線后的體積）
2. 怎么樣我們才能知道一個(gè)框架有沒(méi)有原生的支持typescript呢：
   -上網(wǎng)搜
   -直接使用，沒(méi)有出現(xiàn)類型的提示警告之類的，就是支持的。

3.react-router

3.1 V6

<Route path="*" element={<p>There's nothing here: 404!</p>} />

3.2 V5

函數(shù)式組件中使用

3.3V6實(shí)現(xiàn)私有路由

解決方案：
在v6中，您應(yīng)該將組件作為“元素”傳遞，例如像這樣：
<Route path="/" element={<Dashboard/>}>

4.函數(shù)式組件接收props參數(shù)時(shí)定義數(shù)據(jù)接口？

在利用typescript編寫react項(xiàng)目時(shí)，函數(shù)式組件需要定義返回值類型。傳遞的props參數(shù)的類型，就是使用interface泛型定義的

5.使用TypeScript開(kāi)發(fā)react項(xiàng)目：

1. 函數(shù)式組件寫法有區(qū)別與js的，區(qū)別就是函數(shù)式組件需要寫成箭頭函數(shù)，傳遞props參數(shù)時(shí)需要指定類型，interface泛型。
2. 什么時(shí)候使用ReactComponentProps
   
3. 使用redux時(shí)需要做的處理

6.要使一個(gè)組件擁有路由組件的history、location、match等屬性

1. 需要使用withRouter將組件包裹起來(lái)（reactrouter6以下版本），還可以使用useHistory、useLocation、useParams、useRouteMatch（函數(shù)式組件中）
2. reactRouter6需要使用hooks鉤子，useXxxx，鉤子只能在函數(shù)式組件中使用
   要在類式組件中使用的話，可以使用高階組件，對(duì)類組件進(jìn)行一個(gè)包裹，讓原始類組件擁有useNavigate功能

7.書寫代碼規(guī)范上的一些問(wèn)題

1. 函數(shù)式組件中元素調(diào)用方法時(shí)加不加括號(hào)，寫不寫this，什么時(shí)候用箭頭函數(shù)
2.reducer中賦新值時(shí)的解構(gòu)
3. 什么是高階組件

8.使用redux和react-redux

8.1使用react-redux

npm i react-redux，它并不原生支持typescript，需要再安裝npm install @types/react-redux --save-dev

8.2類式組件中使用react-redux

就是筆記中那樣，導(dǎo)入connect包裹連接UI組件和容器組件

8.3函數(shù)式組件中使用react-redux（使用hooks函數(shù)）

使用鉤子函數(shù)useSelector（解決組件和store的耦合問(wèn)題），可以連接store
使用鉤子函數(shù)useDispatch()分發(fā)dispatch
使用完以上兩個(gè)鉤子函數(shù)后就可以直接連接起狀態(tài)數(shù)據(jù)和action了，不需要再導(dǎo)入store
Header組件

8.4使用redux

類式組件和函數(shù)式組件都一樣，在需要使用數(shù)據(jù)的地方，引入store，使用store.getStore()獲取數(shù)據(jù)，使用store.dispatch()分發(fā)動(dòng)作
HomePage組件

8.5異步處理redux-thunk——可以在action中處理異步任務(wù)

8.6自定義中間件

8.7redux-tooltik

redux-tooltik.js.org
以下是編寫狀態(tài)管理

createSlice：action與reducer捆綁在一起了
將detail從MVC修改到redux-tooltik
以下是編寫異步數(shù)據(jù)操作

9.I18n網(wǎng)站國(guó)際化

這兩個(gè)框架本身就都支持原生typescript，不需要再額外安裝對(duì)typescript的類型聲明文件

10.獲得全局?jǐn)?shù)據(jù)的兩種方式？

10.1 在類組件中使用高階函數(shù)

10.2在函數(shù)式組件中使用hooks

11.如何處理請(qǐng)求得到的html字符串為網(wǎng)頁(yè)

要通過(guò)特定的API渲染

12.登錄相關(guān)

12.1單點(diǎn)登錄與JWT

JWT是干什么的
官網(wǎng)：jwt.io
全稱為JSON Web Token，JWT的作用是用戶授權(quán)，而不是用戶的身份認(rèn)證。
用戶授權(quán)
用戶授指當(dāng)前用戶有足夠的權(quán)限訪問(wèn)特定的資源（錯(cuò)誤狀態(tài)碼：403forbidden禁止訪問(wèn)）
用戶認(rèn)證
用戶認(rèn)證指的是使用用戶名、密碼來(lái)驗(yàn)證當(dāng)前用戶的身份（就是用戶登錄，錯(cuò)誤狀態(tài)碼401Unauthorized未授權(quán)）

解碼jwt
npm i jwt-decode
npm i jwt-decode @types/jwt-decode --save const token = jwtDecode(jwt);
登錄持久化
npm install redux-persist
需要做的操作：

13報(bào)錯(cuò)

interface MyComponentProps extends RouteComponentProps {  
touristRouteId: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ match, location, history, touristRouteId }) => {  
const [data, setData] = useState<any>(null); useEffect(() => {    fetchData();  }, []); const fetchData = async () => {   try {      const response = await fetch(`API_URL/${touristRouteId}`);     const data = await response.json();      setData(data);   } catch (error) {     console.error(error);   }  }; if (!data) {    return <div>Loading...</div>; // 返回加載中的占位符 } return (    // 返回 JSX 元素   <div>      <h1>{data.title}</h1>      // ...    </div>  );};export default MyComponent;

Argument of type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to parameter of type ‘LanguageActionTypes’. Type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to type ‘InterLanguageNew’. Types of prope

網(wǎng)絡(luò)請(qǐng)求

axios

安裝axiosnpm i axios 自帶TS

對(duì)懸空數(shù)據(jù)做預(yù)處理！！！！！

先執(zhí)行構(gòu)造函數(shù)，productList為空，緊接著會(huì)渲染UI，這時(shí)候?yàn)榭?#xff0c;而componnetDidMount會(huì)在組件完全掛載完后執(zhí)行，所以報(bào)錯(cuò)。
處理方法一：在沒(méi)有數(shù)據(jù)的時(shí)候顯示加載中…

避免在useEffect中一直請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)

App.tsx
Header.tsx（顯示購(gòu)物車中有幾種）
DetailPage.tsx（添加到購(gòu)物車的動(dòng)作）