嚴格約定：React 組件必須以大寫字母開頭，而 HTML 標簽則必須是小寫字母。
React
JSX
JSX 是由 React 推廣的 JavaScript 語法擴展。
用于表達組件的 特殊語法的 js 函數
- 要求標簽必須閉合；
- 返回的組件必須包裹在一個父標簽內；
<>...</>類似 vue 的<template>
通過 () 包裹 d多行 html 標簽；通過 {} 插入 js 表達式值
注意: 屬性=xxx 時，要去掉“”，否則無法識別{} 插值
html-to-jsx
className htmlFor 自定義組件特殊屬性
html 內置標簽通過
is屬性 標記為 自定義組件
style 對象方式 指定
style={{width: user.imageSize,height: user.imageSize
}}
事件監聽 on前綴
事件傳播
在 React 中所有事件都會傳播，除了 onScroll，它僅適用于你附加到的 JSX 標簽。
事件捕獲
當子組件阻止事件傳播后，可以通過 on事件Capture 來強制捕獲事件
捕獲會被優先處理
條件循環生成
得益于 jsx 語法，條件和循環都可以用原生js來實現；
被循環的(列表)元素 應該設置 key 屬性，用于在其兄弟節點中唯一標識該元素。
響應式
useState
const [狀態名, 更新狀態方法名] = useState(0)
目前看來響應式只能在組件總使用
useRef
不會觸發重新渲染
Hook useXxxx
hook 要求必須在組件中使用
只能在組件或自定義 Hook 的最頂層調用
內置的hook
useState 響應式
const [狀態名, 更新狀態方法名] = useState(初始值)
useContext
類似 Vue provide/inject
useEffect
將一個組件與外部系統同步 類似vue的watch
useEffect(setup, dependencies?)
useRef
自定義hook
通信
prop
通過定義 組件函數的參數 來設定 props
雙向數據流
react 對表單元素做了特殊處理，使得綁定的prop后，需要綁定onChange等會改變prop值的事件
對應vue @update:propName
組件
應嚴格按照 純函數 編寫
不要在創建時，修改外部的變量
更新屏幕、啟動動畫、更改數據等，它們被稱為 副作用。
它們是 “額外” 發生的事情，與渲染過程無關。副作用無需按照純函數，如事件處理函數。
useEffect 方法在渲染結束后執行。(nextTick)
ref DOM
inputRef.current.xxx
<StrictMode>
包裹 <APP /> 用來 啟用額外的開發行為和警告，使得在開發過程中能夠及早發現組件中的常見錯誤。
createContext
創建一個 context 對象.Provider 傳給上下文動態內容
<xxxContext.Provider value={var}>
下層通過 useContext(context對象) 獲取上下文
https://react.docschina.org/learn
react-dom
React 只包含了 Web 和 Mobile 通用的核心部分，負責 Dom 操作的分到 ReactDOM 中，負責 Mobile 的包含在 ReactNative 中
小駝峰編寫propName
虛擬dom：
render (React18后 將被 createRoot 替代) 會將一段 JSX（“React 節點”）渲染到瀏覽器 DOM 容器節點中。但會先清空DOM 中的內容。
render(reactNode, domNode, callback?)
createPortal 設定插入位置
Redux
全局狀態管理
createStore(function reducer(state, action){})
combineReducers 合并多個 reducer
React Redux
<StrictMode><Provider store={store}><APP /></Provider >
</StrictMode>
<Provider> 組件使得 Redux store 能夠在應用的其他地方使用
React Redux 在內部實現了許多性能優化，以便你編寫的組件僅在實際需要時重新渲染。
- 創建一個 Redux store
- 訂閱更新
- 訂閱回調內部:
i. 獲取當前的 store state
ii. 提取這部分 UI 需要的數據
iii. 使用數據更新 UI - 如有必要，用初始的 state 去渲染 UI
- 通過 dispatching Redux actions 去響應 UI 層的交互
connect方法，用于從 UI 組件生成容器組件。
react-router-dom
官方向導
<StrictMode><BrowserRouter><APP /></BrowserRouter>
</StrictMode>
const routes = [{path: '*',element: <NotFound />,}
]
useRoutes 身材組件注冊
一般編寫
<Routes><Route path="/" element={<NotFound />} /></Routes>
useLoaderData 加載路由變量
react-scripts
包括創建 React 應用程序使用的腳本和配置。
類似 Vue-Cli
umi-requset 類似 axios
https://react.docschina.org/learn/add-react-to-an-existing-project
https://react.docschina.org/learn/start-a-new-react-project
https://reactnative.dev/
@ahooksjs/use-request
useRequest 是一個強大的異步數據管理的 Hooks，React 項目中的網絡請求場景使用 useRequest 就夠了。
https://ahooks.js.org/zh-CN/hooks/use-request/basic
const { data, error, loading } = useRequest(()=>{// 在組件初始化時，會自動執行該異步函數···
}, config)
返回內容：
- data
- error
- loading
- run, runAsync // 僅在手動時有效
- refresh, refreshAsync 重復上一次請求（參數一致）
- mutate(value) 立即更新data
- cancel 忽略當前 promise 返回的數據和錯誤
- params 當前 service 的參數數組
config 配置項
manual 手動執行
const { loading, run, runAsync } = useRequest(service, {manual: true
})
defaultParams 默認參數組
生命周期 鉤子：
- onBefore：請求之前觸發
- onSuccess：請求成功觸發
- onError：請求失敗觸發
- onFinally：請求完成觸發
refreshDeps: [響應式狀態, ···] 當它的值變化后，會重新觸發請求
formatResult
