个人做旅游网站怎样,网站开发排名,有趣的网站网址之家,深圳互助资金盘网站开发1. 前言 本篇梳理和总结React中常用的Hook函数。 欢迎大家来到Hook的世界#xff0c;真的贼好用~ 2. 常用Hook函数 Hook说明示例useState(initialState) 功能#xff1a;为函数组件添加状态变量#xff0c;输入可是基本数据类型或引用数据类型#xff0c;也可以是不带参数…1. 前言 本篇梳理和总结React中常用的Hook函数。 欢迎大家来到Hook的世界真的贼好用~ 2. 常用Hook函数 Hook说明示例useState(initialState) 功能为函数组件添加状态变量输入可是基本数据类型或引用数据类型也可以是不带参数的纯函数函数返回值作为初始值输出则是状态和set函数组成的二值数组 输入State | Function 输出ArrayState | Function const [name, setName] useState(‘Xiaoming’); setName(name name LI); useReducer(reducer, initialArg, init?) 功能创建一个用于管理状态的reducer输出则是状态和dispatch函数组成的二值数组 输入 reducer - 用于更新state的纯函数参数为state和action返回更新后的state initialArg - 用于初始化state的任意值 init? - 计算初始值的函数如果存在init(initialArg)执行结果作为初始值 输出ArrayState | Function const [name, dispatch] useReducer(reducer, {name: xiaoming}) dispatch({name: xiaoming}) useEffect(setup, dependencies?) 功能将组件与外部系统同步 输入 setup - 处理Effect的函数setup函数选择性返回一个清理函数cleanup dependencies - 依赖项数组 输出undefined Effect(() {     const connection createConnection();     connection.connect(); return () {     connection.close();     }; }, []); useLayoutEffect(setup, dependencies?) 功能useLayoutEffect是useEffect的一个版本在浏览器重绘屏幕之前触发。 注可以影响性能尽可能用useEffect 输入同useEffect 输出同useEffect 略useInsertionEffect(setup, dependencies?)功能为CSS-in-JS库的作者特意打造可以在布局副作用触发之前将元素插入到DOM中略useMemo(calculateValue, dependencies) 功能缓存每次重新渲染都需要计算的结果 输入 calculateValue - 计算缓存值的不带参数的纯函数返回值可以是任意类型 dependencies - 依赖项数组 输出返回不带参数调用calculateValue的结果 const cachedData useMemo(()   filterTodos(todos, tab), [todos, tab]) useCallback(fn, dependencies) 功能缓存每次重新渲染都需要计算的结果 输入 fn - 需要缓存的函数此函数接受任何参数并返回任何值 dependencies - 依赖项数组 输出返回传入的fn依赖项数组改变则返回本次渲染传入的fn const handleSubmit useCallback((orderDetails) {   post(/product/ productId /buy, {     referrer, orderDetails, }); }, [productId, referrer]); useRef(initialValue) 功能引用一个不需要渲染的值 输入initialValue - ref对象current属性的初始值可以是任意类型 输出{current: any} - 一个属性的对象 const inputRef useRef(null); useContext(SomeContext) 功能读取和订阅组件中的context 输入SomeContext - createContext创建的context 输出返回context的值 const Context createContext(/*初始值*/); const value useContext(Context); useId() 功能生成传递给无障碍属性的唯一ID 输入无 输出字符串ID 本篇仅列出几个常用的Hook还有很多Hook可以查阅 React 内置 Hook – React 中文文档 3. 总结  作为开发人员想要记住所有API是很困难的事情建议大家学习过程中多收藏官网或个人整理好的文档开发过程遇到不会可以查阅API文档。 注以上如有不合理之处还请帮忙指出大家一起交流学习~