写点什么

乾坤大挪移!React 也能 “用上” computed 属性

2021 年 2 月 01 日

乾坤大挪移!React 也能 “用上” computed 属性

前言,关于计算属性

初次见到计算属性一词,是在 Vue 官方文档 《计算属性和侦听器》 一节中,文章中是这样描述计算属性的:


模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。


回想我们编写的 React 代码,是否也在 JSX(render 函数)中放入了太多的逻辑导致 render 函数过于庞大,难以维护?


React 中的计算属性


说到 React 之前,我们先看下 Vue,在 Vue 中,计算属性主要有以下两点特性:


  1. 计算属性以声明的方式创建依赖关系,依赖的 data 或 props 变更会触发重新计算并自动更新。

  2. 计算属性是基于它们的响应式依赖进行缓存的。


而在 React 中,计算属性也是经常可见,相信各位熟悉 React 的读者都写过类似下面的代码:


import React, { Fragment, Component } from'react';
class Example extends Component { state = { firstName: '', lastName: '', };
render() { // 在 render 函数中处理逻辑 const { firstName, lastName } = this.state; const fullName = `${firstName} ${lastName}`; return<Fragment>{fullName}</Fragment>; }}
复制代码


在上面的代码里,render 函数里的 fullName 依赖了 props 中的 firstName 和 lastName 。firstName 或 lastName 变更之后,变量 fullName 都会自动更新。其实现原理是 props 以及 state 的变化会导致 render 函数调用,进而重新计算衍生值。


虽然能实现计算,但我们还是把计算逻辑放入了 render 函数导致了它的臃肿,这并不优雅。更好的做法是把计算逻辑抽出来,简化 render 函数逻辑:


class Example extends Component {  state = {    firstName: '',    lastName: '',  };
// 把 render 中的逻辑抽成函数,减少render函数的臃肿 renderFullName() { const { firstName, lastName } = this.state; return`${firstName} ${lastName}`; }
render() { const fullName = this.renderFullName(); return<Fragment>{fullName}</Fragment>; }}
复制代码


如果你对 Vue 很了解,你肯定知道其 computed 计算属性,底层是使用了 getter,只不过是对象的 getter。那么在 React 中,我们也可以使用类的 getter 来实现计算属性:



class Example extends Component { state = { firstName: '', lastName: '', };
// 通过getter而不是函数形式,减少变量 get fullName() { const { firstName, lastName } = this.state; return`${firstName} ${lastName}`; }
render() { return<Fragment>{this.fullName}</Fragment>; }}
复制代码


进一步,使用 memoization 优化计算属性


上文有提到在 Vue 中计算属性对比函数执行,会有缓存,减少计算。因为计算属性只有在它的相关依赖发生改变时才会重新求值。


这就意味着只要  firstName 和 lastName 还没有发生改变,多次访问 fullName 计算属性会立即返回之前的计算结果,而不必再次执行函数。


对比之下,React 的 getter 是否也有缓存这个优势??? 答案是:没有。React 中的 getter 并没有做缓存优化


不过不用失望,我们可以使用记忆化技术(memoization)来优化我们的计算属性,达到和 Vue 中计算属性一样的效果。我们需要在项目中引入 memoize-one 库,代码如下:


import memoize from'memoize-one';import React, { Fragment, Component } from'react';
class Example extends Component { state = { firstName: '', lastName: '', };
// 如果和上次参数一样,`memoize-one` 会重复使用上一次的值。 getFullName = memoize((firstName, lastName) =>`${firstName} ${lastName}`);
get fullName() { returnthis.getFullName(this.state.firstName, this.state.lastName); }
render() { return<Fragment>{this.fullName}</Fragment>; }}
复制代码


再进一步,使用 React Hooks 优化计算属性


上文在 React 中使用了 memoize-one 库实现了类似 Vue 计算属性(computed)的效果 —— 基于依赖缓存计算结果。得益于 React 16.8 新推出的 Hooks 特性,我们可以对逻辑进行更优雅的封装,对 Hooks 还不够了解的小伙伴可以先阅读我们团队另一篇文章 《看完这篇,你也能把 React Hooks 玩出花


此处,我们需要用到 useMemo。官方对 useMemo 的介绍在 这里(https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo),详情请移步查看。简单的说,就是我们传入一个 回调函数 和一个 依赖列表,React 会在依赖列表中的值变化时,调用这个回调函数,并将回调函数返回的结果进行缓存:


import React, { useState, useMemo } from'react';
function Example(props) { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); // 使用 useMemo 函数缓存计算过程 const renderFullName = useMemo(() =>`${firstName} ${lastName}`, [ firstName, lastName, ]);
return<div>{renderFullName}</div>;}
复制代码


总结


本文介绍了在 React 中如何实现类似 Vue 计算属性(computed)的效果 —— 基于依赖缓存计算结果,实现逻辑计算与视图渲染的解耦,降低 render 函数的复杂度。


从业务开发角度来讲,Vue 提供的 API 极大地提高了开发效率。React 虽然在某些场景下,没有官方的同类原生 API 支持,但得益于活跃的社区,工作中遇到的问题总能找到解决方案。且在摸索这些解决方案的同时,我们还能学习到诸多经典的编程思想,帮助我们更合理的运用框架,用技术解决业务问题。



头图:Unsplash

作者:不二

原文:https://mp.weixin.qq.com/s/Fv69IvuR4FhyFQbLO7DLMg

原文:乾坤大挪移!React 也能 “用上” computed 属性

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 2 月 01 日 00:001322

评论

发布
暂无评论
发现更多内容

17|3分钟快速创建一套模板

青城

面试大揭秘!从技术面被“虐”到征服CTO,全凭这份强到离谱的pdf

Java成神之路

Java 程序员 架构 面试 编程语言

小鼎机器人系统开发功能及源码

系统开发咨询1357O98O718

Java-技术专题-ConcurrentHashMap读操作分析

李浩宇/Alex

Java ConcurrentHashMap

管理者如何才能不亲力亲为?

石云升

项目管理 28天写作 职场经验 管理经验 3月日更

监控系统-zabbix快速入门

小铨

监控 zabbix

Java-技术专题-Synchronized和lock区别

李浩宇/Alex

Java

MySQL-技术专题-使用规范

李浩宇/Alex

MySQL

Vue3源码 | 如何挂载组件元素?

梁龙先森

源码分析 Vue3 前端进阶

周小川:数字货币将是下一代货币研究工作的核心

CECBC区块链专委会

数字货币

Python OpenCV 图像旋转,取经之旅第 11 天

梦想橡皮擦

3月日更

悖论和直觉

认知源码

蚂蚁金服三面Java面试题全解析,这也太难了吧

Java架构之路

Java 程序员 架构 面试 编程语言

数据库与缓存的一致性方案演进

邱学喆

缓存 一致性

渣硕试水字节跳动,本以为简历都过不了,123+HR面直接拿到意向书

云流

Java 编程 程序员 架构 面试

区块链通证经济——资产流动性的变革

CECBC区块链专委会

资产流动性

爱了! Alibaba技术官甩出的“阿里内部Java成长笔记”,差距对比真的是不止一点点

Java成神之路

Java 程序员 架构 面试 编程语言

AWS CDK的那些事

小铨

AWS AWS CDK

架构学习 笔记1

felix徐

架构实战营

字节跳动5面喜提offer!分享给朋友们面试感受

Java架构之路

Java 程序员 架构 面试 编程语言

爽啊,终于又见面了,字节跳动后端社招面试分享

Java架构之路

Java 程序员 架构 面试 编程语言

阿里内产“Redis深度笔记”,从基础深入到源码,不讲一句废话,全是精华!

神奇小汤圆

Java redis 程序员 架构 面试

redis+docker构建主从环境

小铨

redis Docker redis+docker 主从环境

什么?你居然还不知道Docker是什么?看看京东首席架构师怎么说的

互联网架构师小马

Docker 容器

想要精通Redis?这篇文章不得不看,Redis之父带你实战实践

互联网架构师小马

Java 数据库 nosql redis 面试

mysql实现主主数据库(双机热备)

大奎

MySQL-技术专题-知识点介绍

李浩宇/Alex

MySQL

6面蚂蚁,面试官被窝唬住了,居然开了36K,Java面试怎么就突然简单起来了

Java成神之路

Java 程序员 架构 面试 编程语言

Kubernetes Ingress 可视化编辑器

倪朋飞

Kubernetes 网络

区块链如何助力中小企业解决融资难题

CECBC区块链专委会

区块链

Kubernetes 弃用 Docker 后如何切换到 Containerd

倪朋飞

Docker Kubernetes 微服务

4月17日 HarmonyOS 开发者日·上海站

4月17日 HarmonyOS 开发者日·上海站

乾坤大挪移!React 也能 “用上” computed 属性-InfoQ