第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 ~~~