10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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

  • 2021-02-01
  • 本文字数:2395 字

    阅读完需:约 8 分钟

乾坤大挪移!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-02-01 00:002611

评论

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

Mybatis【19】-- Mybatis自关联多对多查询

秦怀杂货店

Mybatis【20】-- Mybatis延迟加载怎么处理?

秦怀杂货店

数据库 缓存 mybatis 加载

(28DW-S8-Day3) 比特币、 区块链是什么?

mtfelix

比特币 区块链 28天写作

上天的源码要不要——GitHub 热点速览 v.21.08

HelloGitHub

Python GitHub 开源 Go 语言

New转乾坤——云网融合真正的打开方式!

脑极体

如何监控Nginx的upstream后端server

运维研习社

nginx 负载均衡 zabbi

Selenium 常用方法与属性、鼠标悬停与 Select 操作

梦想橡皮擦

Python 28天写作 2月春节不断更

lua 对象编程解读

程序员与厨子

lua 学习 编程

python爬虫-学习urllib和requests使用,模拟请求

大佬sam

二月春节不断更

压力太大的话,就放点气儿吧

道伟

28天写作

“云原生”的应用价值及关键属性解读

这些面试题你会吗?连续四年百度Android岗必问面试题!深度好文

欢喜学安卓

android 程序员 面试 移动开发

【管理笔记11】优秀人才的十二个特质

L3C老司机

28天写作

程序员心中的一道坎:主存的编址与计算和串并联系统!

冰河

程序员 操作系统 计算 编址 串并联系统

第5周作业_贷款申请流程图

园子

互联网金融

MYSQL 索引篇(上)

new life

MySQL性能优化 执行计划 MySQL使用 索引性能

三、创建、更新和删除文档

Kylin

读书笔记 七日更 分布式数据库mongodb 二月春节不断更

MYSQL 索引篇(下)

new life

MySQL MySQL性能优化 多字段联合验证 索引性能

透彻解析!在字节跳动我是如何当面试官的,讲的明明白白!

欢喜学安卓

android 程序员 面试 移动开发

28天瞎写的第二百四十一天:正念是不是迷信、玄学、神棍?

树上

冥想 28天写作 正念 迷信

基于matlab的控制系统与仿真2-传递函数模型

AXYZdong

matlab 2月春节不断更

我的配置中心知识整理

老白鹿

微服务 技术选型 配置中心 配置管理

Kafka.05 - 生产者与消费者介绍

insight

kafak 2月春节不断更

透彻解析!如何快速的开发一个完整的直播app,薪资翻倍

欢喜学安卓

android 程序员 面试 移动开发

go get下载包失败问题

happlyfox

28天写作 2月春节不断更 Go 语言

工业互联网助力数字中国建设(新论)

工业互联网

聊聊如何做好计划

数列科技杨德华

28天写作

如何解决深度推荐系统中的Embedding冷启动问题?

王喆

机器学习 深度学习 推荐系统 计算广告 Embedding

【进阶】面试官问我Chrome浏览器的渲染原理(6000字长文)

我是哪吒

学习 程序员 chorme 28天写作 2月春节不断更

遇见ZooKeeper:初识

Jackey

zookeeper

什么容易被记住——造梦师指南

Justin

心理学 28天写作 游戏设计

乾坤大挪移!React 也能 “用上” computed 属性_大前端_政采云前端团队_InfoQ精选文章