其它React Hooks以及自定义Hooks和第三方Hooks库的使用

- useMemo

作用：相当于vue中的计算属性。用于组件中复杂运算的优化

特点：当它所关联的声明式变量发生变化，它才会重新运算；反之，不会

语法：const result = useMemo(fn,[依赖数组])

说明：有且仅有当 ‘依赖数组’里的声明式变量发生变化，fn才会执行

注意：在使用useMemo时，要自己根据需求来指定'依赖数组'

示例：

const TestHooks = props => {const [first, setFirst] = useState('')const [last, setLast] = useState('')const fullName = useMemo(() => {console.log('fullName被重新计算了');return first + last}, [first, last])return (<div><h1>Hooks编程</h1><hr />你的姓：<input value={first} onChange={(e) => setFirst(e.target.value)} />你的名：<input value={last} onChange={(e) => setLast(e.target.value)} /><p>你的名字是:{fullName}</p></div>)
}
export default TestHooks

- useCallback

作用：用于定义一个可以被缓存的函数，也是一种性能优化的方案

语法：const newFn = useCallback(fn,[依赖数组])

说明：有且仅有当“依赖数组”中的声明式变量发生变化时，fn才会重新执行。

示例：

const TestHooks = props => {const renderRow = useCallback(() => {console.log(' renderRow执行了');return <p>我是动态渲染的行</p>}, [])return (<div><h1>Hooks编程</h1><hr />{renderRow()}</div>)
}
export default TestHooks

- useRef

作用：由于在函数式组件中，没有ref，所以useRef是用来模拟类组件中ref功能的，获取组件dom实例

语法：const box = useRef(null) 访问：box.current

const TestHooks = props => {const box = useRef(null)const changeRef = () => {const dom = box.currentdom.style.color = 'red'}return (<div><h1>Hooks编程</h1><hr /><p ref={box}>测试函数式组件中的ref</p><button onClick={changeRef}>获取ref</button></div>)
}
export default TestHooks

- useReducer

用于在React函数式组件内部模拟Redux状态管理的功能

- useLayoutEffect

其语法和功能与useEffect几乎相同。区别是它们执行时机不同，useEffect是异步的，当视图渲染完成时才执行；useLayoutEffect是同步的，在视图开始渲染完成之前就执行了

自定义Hooks

什么是自定义Hooks？就是React官方提供的Hooks或者其它的Hooks库，来封装我们自己的Hooks，实现代码逻辑的复用

原则：自定义Hooks是一个函数，其名称以‘use’开头，函数内部可以调用其它的Hook

注意：自定义Hooks是可以复用的，同一个Hooks被复用时，彼此之间完全独立，不会被相互影响

示例：

// 封装一个用于改变文档标题的hook
import { useEffect } from "react"
const useTitle = (title) => {// 在自定义hooks内部可以使用官方提供的hooks或者第三方hooks库useEffect(() => {document.title = title || '这是自定义的Hooks'}, [])
}
export { useTitle }// 使用
useTitle("哈哈哈")

使用第三方Hooks库

推荐使用npm上的 react-use 这个库安装：npm install react-use

每一个hooks函数都有使用说明，照葫芦画瓢就行

例如使用 - useFullscreen

// 引入第三方hooks库
import { useFullscreen, useToggle } from 'react-use'const TestHooks = props => {// 全屏操作const dom = useRef(null)const [show, toggle] = useToggle(false);const isFullscreen = useFullscreen(dom, show, { onClose: () => toggle(false) });return (<div><h1>Hooks编程</h1><hr /><div ref={dom} style={{ color: "red" }}>我是可以全屏的div</div><button onClick={() => toggle()}>点击切换全屏</button></div>)
}
export default TestHooks

其它React Hooks以及自定义Hooks和第三方Hooks库的使用相关推荐

自定义TextView支持第三方字体库(以隶书为例)
下载地址: http://download.csdn.net/download/jackwolf_gao/4973584 描述:自定义TextView支持第三方字体库(以隶书为例) 思路: 1,将字体 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
react dispatch_React系列自定义Hooks很简单
React系列-Mixin.HOC.Render Props(上) React系列-轻松学会Hooks(中) React系列-自定义Hooks很简单(下) 我们在第二篇文章中介绍了一些常用的hooks ...
react第三方组件库_如何自定义您的第三方React组件
react第三方组件库 by Jacob Goh 雅各布·高如何自定义您的第三方React组件 (How to customize your third party React components ...
都React V18了，还不会正确使用React Hooks吗，万字长文解析Hooks的常见问题
前言今天主要想说一下react hooks,react hooks是react v16.8 之后引入的API,现在react都已经到V18了,hooks怎么还能不会用呢? 首先hooks引入的目的是 ...
php ci hooks,CI框架 -- 核心文件之 Hooks.php
1 /**2 * 钩子嘛,就是在不修改系统核心文件的基础上来改变或增加系统的核心运行功能3 */ 4 classCI_Hooks {5 6 /**7 * 检测hook是否开启8 */ 9 var $e ...
laravel中的自定义函数的加载和第三方扩展库加载
一.自定义公共函数 1. 创建文件 app/Helpers/functions.php 2. 修改项目 composer.json 3.运行composer dump-auto 4.OK,然后你就可以 ...
[react] react中你用过哪些第三方的中间件
[react] react中你用过哪些第三方的中间件 redux-thunk: Redux的异步处理方案,actionCreator中可以返回一个函数(即可以dispatch一个function),函 ...
python自定义模块和三方模块_python基础知识8——模块1——自定义模块和第三方开源模块...
模块的认识模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...

其它React Hooks以及自定义Hooks和第三方Hooks库的使用

其它React Hooks以及自定义Hooks和第三方Hooks库的使用相关推荐

最新文章

热门文章