React hooks实践
前言
最近要对旧的项目进行重构,统一使用全新的react技术栈。同时,我们也决定尝试使用React hooks来进行开发,但是,由于React hooks崇尚的是使用(也只能使用)function component的形式来进行开发,而不是class component,因此,整个开发方式也会与之前产生比较大的差异。所以,我这里就积累了下实际项目中遇到的问题以及思考,看下能不能帮助大家少走弯路。
正文
接下来就直接进入正文。我会将项目中遇到的问题一一列举出来,并且给出解决方案。
执行初始化操作的时机
当我转到React hooks的时候,首先就遇到了这个问题:
一般来说,业务组件经常会遇到要通过发起ajax请求来获取业务数据并且执行初始化操作的场景。在使用class component编程的时候,我们就可以在class component提供的生命周期钩子函数(比如componentDidMount, constructor等)执行这个操作。可是如果转到React hooks之后,function component里是没有这个生命周期钩子函数的,那这个初始化操作怎么办呢?总不能每次遇到这种场景都使用class component来做吧?
解决方案:使用useEffect(想知道useEffect是什么的话,可以点击这里)
useEffect,顾名思义,就是执行有副作用的操作,你可以把它当成componentDidMount
, componentDidUpdate
, and componentWillUnmount
的集合。它的函数声明如下
useEffect(effect: React.EffectCallback, inputs?: ReadonlyArray<any> | undefined)
那么,我们在实际使用中,我们就可以使用这个来执行初始化操作。举个例子
import React, { useEffect } from 'react'
export function BusinessComponent() {
const initData = async () => {
// 发起请求并执行初始化操作
}
// 执行初始化操作,需要注意的是,如果你只是想在渲染的时候初始化一次数据,那么第二个参数必须传空数组。
useEffect(() => {
initData();
}, []);
return (<div></div>);
}
需要注意的是,这里的useEffect的第二个参数必须传空数组,这样它就等价于只在componentDidMount的时候执行。如果不传第二个参数的话,它就等价于componentDidMount和componentDidUpdate
做一些清理操作
由于我们在实际开发过程中,经常会遇到需要做一些副作用的场景,比如轮询操作(定时器、轮询请求等)、使用浏览器原生的事件监听机制而不用react的事件机制(这种情况下,组件销毁的时候,需要用户主动去取消事件监听)等。使用class Component编程的时候,我们一般都在componentWillUnmount或者componentDidUnmount的时候去做清理操作,可是使用react hooks的时候,我们如何做处理呢?
解决方案:使用useEffect第一个参数的返回值
如果useEffect的第一个参数返回了函数的时候,react会在每一次执行新的effects之前,执行这个函数来做一些清理操作。因此,我们就可以使用它来执行一些清理操作。
例子:比如我们要做一个二维码组件,我们需要根据传入的userId不断轮询地向后台发请求查询扫描二维码的状态,这种情况下,我们就需要在组件unmount的时候清理掉轮询操作。代码如下:
import React, { useEffect } from 'react'
export function QRCode(url, userId) {
// 根据userId查询扫描状态
const pollingQueryingStatus = async () => {
}
// 取消轮询
const stopPollingQueryStatus = async() => {
}
useEffect(() => {
pollingQueryingStatus();
return stopPollingQueryStatus;
}, []);
// 根据url生成二维码
return (<div></div>)
}
这样的话,就等价于在componentWillUnmount的时候去执行清理操作。
但是,有时候我们可能需要执行多次清理操作。还是举上面的例子,我们需要在用户传入新的userId的时候,去执行新的查询的操作,同时我们还需要清除掉旧的轮询操作。想一下怎么做比较好。
其实对这种情况,官方也已经给出了解决方案了,useEffect的第二个参数是触发effects的关键,如果用户传入了第二个参数,那么只有在第二个参数的值发生变化(以及首次渲染)的时候,才会触发effects。因此,我们只需要将上面的代码改一下:
import React, { useEffect } from 'react'
export function QRCode(url, userId) {
// 根据userId查询扫描状态
const pollingQueryingStatus = async () => {
}
const stopPollingQueryStatus = async() => {
}
// 我们只是将useEffect的第二个参数加了个userId
useEffect(() => {
pollingQueryingStatus();
return stopPollingQueryStatus;
}, [userId]);
// 根据url生成二维码
return (<div></div>)
}
我们只是在useEffect的第二个参数数组里,加入了一个userId。这样的话,userId的每一次变化都会先触发stopPollingQueryStatus,之后再执行effects,这样就可以达到我们的目的。
useState与setState的差异
react hooks使用useState来代替class Component里的state。可是,在具体开发过程中,我也发现了一些不同点。useState介绍可以点击这里
在setState的时候,我们可以只修改state中的局部变量,而不需要将整个修改后的state传进去,举个例子
import React, { PureComponent } from 'react';
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
name: 'cjg',
age: 18,
}
}
handleClick = () => {
const { count } = this.state;
// 我们只需要传入修改的局部变量
this.setState({
count: count + 1,
});
}
render() {
return (
<button onClick={this.handleClick}></button>
)
}
}
而使用useState后,我们修改state必须将整个修改后的state传入去,因为它会直接覆盖之前的state,而不是合并之前state对象。
import React, { useState } from 'react';
export function Count() {
const [data, setData] = useState({
count: 0,
name: 'cjg',
age: 18,
});
const handleClick = () => {
const { count } = data;
// 这里必须将完整的state对象传进去
setData({
...data,
count: count + 1,
})
};
return (<button onClick={handleClick}></button>)
}
减少不必要的渲染
在使用class Component进行开发的时候,我们可以使用shouldComponentUpdate
来减少不必要的渲染,那么在使用react hooks后,我们如何实现这样的功能呢?
解决方案:React.memo和useMemo
对于这种情况,react当然也给出了官方的解决方案,就是使用React.memo和useMemo。
React.memo
React.momo其实并不是一个hook,它其实等价于PureComponent,但是它只会对比props。使用方式如下(用上面的例子):
import React, { useState } from 'react';
export const Count = React.memo((props) => {
const [data, setData] = useState({
count: 0,
name: 'cjg',
age: 18,
});
const handleClick = () => {
const { count } = data;
setData({
...data,
count: count + 1,
})
};
return (<button onClick={handleClick}>count:{data.count}</button>)
});
useMemo
useMemo它的用法其实跟useEffects有点像,我们直接看官方给的例子
function Parent({ a, b }) {
// Only re-rendered if `a` changes:
const child1 = useMemo(() => <Child1 a={a} />, [a]);
// Only re-rendered if `b` changes:
const child2 = useMemo(() => <Child2 b={b} />, [b]);
return (
<>
{child1}
{child2}
</>
)
}
从例子可以看出来,它的第二个参数和useEffect的第二个参数是一样的,只有在第二个参数数组的值发生变化时,才会触发子组件的更新。
总结
一开始在从class component转变到react hooks的时候,确实很不适应。可是当我习惯了这种写法后,我的心情如下:
当然,现在react hooks还是在alpha阶段,如果大家觉得不放心的话,可以再等等。反正我就先下手玩玩了哈哈哈。
本文地址在->本人博客地址, 欢迎给个 start 或 follow
React hooks实践的更多相关文章
- 理解 React Hooks
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由志航发表于云+社区专栏 TL;DR 一句话总结 React Hooks 就是在 react 函数组件中,也可以使用类组件(classe ...
- React Hooks用法大全
前言 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖 ...
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...
- React Hooks 实现react-redux
Redux 是目前 React 系统中最常用的数据管理工具,它落实并发扬了 Flux 的数据单向流动模式,被实践证明为一种成熟可用的模式. 尽管承受着一些非议,Redux 在 React 数据管理界的 ...
- 蒲公英 · JELLY技术周刊 Vol.21 -- 技术周刊 · React Hooks vs Vue 3 + Composition API
蒲公英 · JELLY技术周刊 Vol.21 选 React 还是 Vue,每个人心中都会有自己的答案,有很多理由去 pick 心水的框架,但是当我们扪心自问,我们真的可以公正的来评价这两者之间的差异 ...
- 通过 React Hooks 声明式地使用 setInterval
本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...
- 初探React Hooks & SSR改造
Hooks React v16.8 发布了 Hooks,其主要是解决跨组件.组件复用的状态管理问题. 在 class 中组件的状态封装在对象中,然后通过单向数据流来组织组件间的状态交互.这种模式下,跨 ...
- [转] React 最佳实践——那些 React 没告诉你但很重要的事
前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
随机推荐
- java开发师笔试面试每日12题(3)
1.JDK和JRE的区别是什么? Java运行时环境(JRE)是将要执行Java程序的Java虚拟机.它同时也包含了执行applet需要的浏览器插件.Java开发工具包(JDK)是完整的Java软件开 ...
- Redis各种数据类型的应用场景
redis是一种key values形式的非关系型数据库,通过内存存储,也可以把数据持久化到本地文件中. redis支持丰富的数据类型,String,list,set,zset,hash,下面说一下各 ...
- 解决maven在build时下载文件卡死问题
1.停止build 2.cd ~/.m2/repository 3.在这个目录下找到你要下载的文件,然后查看是否有个同名文件带一个.lock后缀 4.rm -f xxxx.lock 5.重新bui ...
- PostGIS集群
postgresql集群:https://bbs.csdn.net/topics/390896906?page=1 https://blog.csdn.net/s465689853/article/ ...
- Minimum setup for Apache+AD SSO
参照: http://www.grolmsnet.de/kerbtut/ https://docs.typo3.org/typo3cms/extensions/ig_ldap_sso_auth/2.1 ...
- poj1164 The Castle
有一个n*m的城堡,由一个个小房间组成,每个房间由一个零和四面的墙组成,每个房间都有一个价值, 价值的计算方式是:west_walls价值为1,north_walls价值为2,east_walls价值 ...
- Linux下Memcache服务器端的安装
最近在研究怎么让Discuz!去应用Memcache去做一些事情,记录下Memcache安装的过程. Linux下Memcache服务器端的安装服务器端主要是安装memcache服务器端,目前的最新版 ...
- hive 日常技巧
--删除表中重复数据 delete from vitae a where (a.peopleId,a.seq) in (select peopleId,seq from vitae group by ...
- Codeforces Round #421 (Div. 2)
A: 题意:给你一本书共c页,第一天看v0页,第二天看v0+a,第二天看v0+2a以此类推,每天最多看v1页,但是后一天要重复看前一天的后l页. 代码: #include<stdio.h> ...
- eclipse项目无故报错,markers信息为An error occurred while filtering resources
eclipse项目无故报错,markers信息为An error occurred while filtering resources 描述:eclipse项目和resource文件上有红色的叉,其m ...