第6節 hook整理 · react

[TOC] ### 1\. useState() * **React內置自帶函數**，在Bigfish中導入方式：import { useState } from '@alipay/bigfish/react'; * **接收一個參數**：可以是任意值，如果函數必須要有返回值 * **使用場景**：代替state使用的，如：每個頁面、model等 * **demo**：\[name,setName\]=useState('tong') * **demo2**:\[name,setName\]=useState(()=>'tong') ~~~ import { Button, message } from 'antd'; import React, { useState, useEffect } from 'react'; const COLORS = ['red', 'orange', 'blue']; const App = () => { const [state, setState] = useState({count: 0, color: 'red'}); message.info('render'); return ( <div> <div style={{color: state.color}}>{state.count}</div> <Button onClick={()=>setState(s=>({...s, count: s.count + 1, color: COLORS[(s.count + 1) % 3]}))} > add </Button> </div> ) } ReactDOM.render(<App />, mountNode);import { Button, message } from 'antd'; import React, { useState, useEffect } from 'react'; const COLORS = ['red', 'orange', 'blue']; const App = () => { const [state, setState] = useState({count: 0, color: 'red'}); message.info('render'); return ( <div> <div style={{color: state.color}}>{state.count}</div> <Button onClick={()=>setState(s=>({...s, count: s.count + 1, color: COLORS[(s.count + 1) % 3]}))} > add </Button> </div> ) } ReactDOM.render(<App />, mountNode); ~~~ ### 2. useReducer() 當前操作有不同的返回結果的情況下使用 ~~~ import { Button, message } from 'antd'; import React, { useReducer } from 'react'; const COLORS = ['red', 'orange', 'blue']; const initState = {count:0, color: 'red'}; const reducer = (state, action) => { switch (action.type) { case 'add': const count = state.count + 1; const color = COLORS[count % 3]; return {...state, count, color}; default: throw new Error(); } } const App = () => { const [state, dispatch] = useReducer(reducer, initState); message.info('render'); return ( <div> <div style={{color: state.color}}>{state.count}</div> <Button onClick={()=>{dispatch({type: 'add'})}} > add </Button> </div> ) } ReactDOM.render(<App />, mountNode); ~~~ ### 2\. useEffect() * **React內置自帶函數**，在Bigfish中導入方式：import { useEffect } from '@alipay/bigfish/react'; * **接收兩個參數**，第一個參數：回調函數()=>{}，第二個參數：可選參數：\[\] * **使用場景**：代替部分（componentDidMount()、componentDidUpdate()、componentWillUnmount()）生命周期使用 * **使用方式**： useEffect 接收兩個參數，第一個是必傳的 callback，第二個是選傳的 dependencies, 類型為**列表**。例如 \[a, b\]。可以理解為，每當 dependencies 中的一個或多個元素發生改變時，都會去執行一遍callback.?第二個參數表示監聽某些值變化才會執行return函數也就是callback函數 * **兩個特殊情況是**： **1.deps 為空列表 \[\], 則 callback 只會在組件 mount 時被執行。** **2.不傳入 \[\]參數，則每當 state 或者 props 發生變化（組件重新渲染）時，callback 都會被執行。** * **demo：** ~~~ useEffect(()=>{ const timer = window.setInterval(()=>{console.log(a)}, 1000); return () => window.clearInterval(timer); }, [a]) ~~~ ### 3\. useModel() * **Bigfish內置函數，react里不存在**，在Bigfish中導入方式：import { useState } from '@alipay/bigfish'; * **接收一個參數**：類型為字符串，為model下的文件夾名稱 * **使用場景**：獲取model中使用useState定義的數據 * **注意：**model文件有格式要求 ~~~ import { useState } from '@alipay/bigfish/react'; const useUser = () => { const [name, setName] = useState<string>(DEFAULT_NAME); const [hookdata, setHookdata] = useState<string>('初始值'); return { name, setName, hookdata, setHookdata }; }; export default useUser; ~~~ * **demo**： ~~~ const { name } = useModel('global'); ~~~ ### 4\. useRequest() * **Bigfish內置函數，react里不存在**，在Bigfish中導入方式：import { useRequest } from '@alipay/bigfish'; * **接收兩個參數**，第一個參數：回調函數()=>{}，**需要返回一個 Promise** * **使用場景**：使用數據請求 * **說明：相當于在****componentDidMount()生命周期中** * **demo：** ~~~ const { data } = useRequest(() => { return services.UserController.queryUserList({}); }); ~~~ ### 5\. useCollback() * **React內置自帶函數**，在Bigfish中導入方式：import { useCollback } from '@alipay/bigfish/react'; * **接收兩個參數**，第一個參數：函數()=>{}，第二個參數：\[\]。只有當 \[\]中的值發生變化時，collback 才會重新執行，并把 callback 的返回值傳遞給變量 * 使用場景：父子組件直接避免重復更新問題，在傳遞是是**函數**的情況下使用 * **優點：**useCallback包裹的函數，相當于對函數做了緩存，當父組件重新渲染時，函數不會重新定義==》子組件不會重新渲染 * **說明：**可以確保在每次重新渲染后，函數的引用地址保持不變 ### 6\. useMome() * **React內置自帶函數**，在Bigfish中導入方式：import { useMome } from '@alipay/bigfish/react'; * **接收兩個參數**，第一個參數：函數()=>{}，第二個參數：\[\]。只有當 \[\]中的值發生變化時，memo 才會重新執行，并把 callback 的返回值傳遞給變量。如果 useMemo 的第二個參數傳入了一個空列表\[\], 那么這一函數只會在組件初始化的時候被執行。 * **優點：**useMemo包裹的變量，相當于對變量做了緩存，當父組件重新渲染時，變量不會改變==》子組件不會重新渲染 * 使用場景：父子組件直接避免重復更新問題，在傳遞是是**變量**的情況下使用 * **說明：**為了解決**變量**被回收和重建的問題。用來做性能優化的避免父子組件的其他方法執行 ~~~ useMome(()=>{ const timer = window.setInterval(()=>{console.log(a)}, 1000); }, [a]) ~~~ ### 7\. 自定義hook函數（就是分裝一些功能） ~~~ // 實時監測瀏覽器窗口大小的Hooks函數 import React,{ useState ,useEffect ,useCallback } from 'react'; const useWinSize = () =>{ const [size,setSize] = useState({ width:document.documentElement.clientWidth, height:document.documentElement.clientHeight }) //useCallback，目的是為了緩存方法(useMemo是為了緩存變量) const onResize = useCallback(() => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }) },[]) useEffect(()=>{ window.addEventListener('resize',onResize) return ()=>{ window.removeEventListener('resize',onResize) } },[]) return size } //組件中使用 const MyHooks = ()=>{ const size = useWinSize() return <div>size:{size.width}x{size.height}</div> } export default MyHooks ~~~