react hooks 全面转换攻略(二) react本篇剩余 api
useCallback,useMemo
因为这两个 api 的作用是一样的,所以我放在一起讲;
语法:
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;
function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;
区别在于第一个参数,还有参数的传递,另外 useCallback 中 DependencyList 是一个必须值
这两个 api 的作用基本就是缓存数据/方法
使用过 react 的人都知道,在组件传递值的时候,如果 props 中某一值对象引用发生变化,就会发生重新渲染,即使前后2个对象是完全相同的;
这2个参数就是为了解决这个问题,另外也有可以减轻一些方法的rerender的速度;
useRef
作用基本是取代 class 中的 createRef,在此不多细说
useContext
作用基本是取代 class 中的 Context 中 Context.Provider ,接受参数 Context,因为可能会有多层 context,所以这个参数是必须的,不然无法辨别
useImperativeHandle
语法:
function useImperativeHandle<T, R extends T>(ref: Ref<T>|undefined, init: () => R, deps?: DependencyList): void;
官网是叫 useImperativeMethods
,但是我在 @types/react@17.8.7
中,是叫做 useImperativeHandle
的,不过函数名还是以实际为准
在官网中,他的作用是这样解释的:
useImperativeMethods自定义使用ref时公开给父组件的实例值。 与往常一样,在大多数情况下应避免使用refs的命令式代码。
这个 api 的使用必定伴随着 forwardRef 这个 api, 使用率基本较低;
官方例子:
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeMethods(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);
在此示例中,呈现的父组件将能够调用fancyInputRef.current.focus()。
简单的说就是讲子组件中的创建方法暴露给父组件
useMutationEffect
签名与useEffect相同,但在更新兄弟组件之前,它在React执行其DOM突变的同一阶段同步触发。 使用它来执行自定义DOM突变。
同样的 @types/react@16.8.7 没有这个函数的声明;
不过官网中 大多是告诫尽量少用此函数
useLayoutEffect
语法:
function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
参数基本和 useEffect
相同
官方所说的效果:
签名与useEffect相同,但在所有DOM突变后它会同步触发。 使用它从DOM读取布局并同步重新渲染。 在浏览器有机会绘制之前,将在useLayoutEffect内部计划的更新将同步刷新。
不知道大家有没有使用过 vue,他的作用和 vue 中的 nexttick 差不多吧;
在需要读取 dom 的高度,宽度的时候特别需要
说到现在, api 基本已经讲完了,除了 useReducer, 我将会放在 redux 篇中讲述
react hooks 全面转换攻略(二) react本篇剩余 api的更多相关文章
- react hooks 全面转换攻略(一) react本篇之useState,useEffect
useState 经典案例: import { useState } from 'react'; function Example() { const [count, setCount] = useS ...
- react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案 一.redux维持原方案 若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话 可以使用 redux-re ...
- mac攻略(二) -- 简单配置php开发环境
最简单直接的方式还是使用 Mac 上自带的 Apache 和 PHP. 1.启动 Apache 1>启动apache $sudo apachectl start; 2>启动后,在浏览器 ...
- React Hooks 你不来了解下?
前言 最近在看 React 的新语法-- React Hooks,只能一句话概括:React 语法真的是越来越强大,越写代码越少. 强烈推荐还没看 React Hooks 的同学去学习下,这会让你写r ...
- React Hooks --- useState 和 useEffect
首先要说的一点是React Hooks 都是函数,使用React Hooks,就是调用函数,只不过不同的Hooks(函数)有不同的功能而已.其次,React Hooks只能在函数组件中使用,函数组件也 ...
- React Hooks介绍和环境搭建(一)
React Hooks 简介 2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏.React Hooks就是用函数的形式代替原来的继承类的形式,并且 ...
- React Hooks简单业务场景实战(非源码解读)
前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...
- (地址)eclipse插件开发攻略的访问地址
园子地址: http://www.cnblogs.com/liuzhuo/category/257208.html 关键字: Eclipse插件开发彻底攻略 eclipse插件开发基础篇之
- React hooks实践
前言 最近要对旧的项目进行重构,统一使用全新的react技术栈.同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function c ...
随机推荐
- Python爬虫 爬取Web页面图片
从网页页面上批量下载jpg格式图片,并按照数字递增命名保存到指定的文件夹 Web地址:http://news.weather.com.cn/2017/12/2812347.shtml 打开网页,点击F ...
- 如何实现IIS 7.0对非HTTP协议的支持
在<再谈IIS与ASP.NET管道>介绍各种版本的IIS的设计时,我们谈到IIS 7.0因引入WAS提供了对非HTTP协议的支持.这个对于WCF的服务寄宿来说意义重大,它意味着我们通过II ...
- POJ-1679 The Unique MST,次小生成树模板题
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Description Given a connected undirec ...
- MTK TP手势添加
old: #include "tpd.h" #include "tpd_custom_gt9xx.h" #ifndef TPD_NO_GPIO #include ...
- segv & mini coredump 调研
1. mini coredump a. segv http://zh.scribd.com/doc/3726406/Crash-N-Burn-Writing-Linux-applica ...
- 【BZOJ2527】Meteors(整体二分)
题意: Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1份相邻),第i份上有第Ai个国家的太空站. 这个星球经常会 ...
- 【ZJOI2017 Round1练习】D8T2 sequence(DP)
题意: 思路: #include <algorithm> #include <iostream> #include <cstring> #include <c ...
- 【ZJOI2017 Round1练习&&BZOJ5353】D7T2 guess(费用流)
题意: 思路: ..]of longint; pre:..,..]of longint; inq:..]of boolean; q:..]of longint; n,m,i,j,ans,tot,sou ...
- zset(sorted set:有序集合)数据类型【八】
一.概述:(zset) Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数 ...
- Spring Cloud(5):Hystrix的使用
熔断:类似生活中的保险丝,电流过大就会熔断 降级:类似生活中的旅行,行李箱只有那么大,所以要抛弃一些非必需的物品 熔断降级应用: 某宝双十一商品下单,用户量巨大,于是考虑抛弃相关商品推荐等模块,确保该 ...