【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

乾坤大挪移!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:002240

评论

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

netty系列之:选byte还是选message?这是一个问题

程序那些事

Java Netty 程序那些事 UDT 1月月更

什么是Log4Shell?Log4j漏洞解读

龙智—DevSecOps解决方案

log4j Log4j 2 Log4Shell

编写Spring MVC控制器的技巧

编程江湖

Spring MVC

前端开发Vue中的v-指令的使用

@零度

Vue 前端开发

架构营模块八作业

GTiger

架构实战营

10个问题让你快速避开java中的jdbc常见坑

华为云开发者联盟

Java 数据库 JDBC fetchSize Prepared Statement

书单 | 学习数据可视化?看这些书就够了!

博文视点Broadview

EMQ 映云科技入围 Venture50 行业榜单,数字科技企业风向标!

EMQ映云科技

物联网 Venture50

测试阻碍交付,如何破解这一难题?

SoFlu软件机器人

Hive on Spark和Spark sql on Hive,你能分的清楚么

华为云开发者联盟

sql 分布式计算 Sparksql hive on spark 数据源

作业5

施正威

【量化】量化交易入门系列3:经典的量化交易策略(中)

恒生LIGHT云社区

量化投资 量化交易 量化

【Golang】浅谈协程并发竞争资源问题

恒生LIGHT云社区

golang 后端 协程 并发 Go 语言

今天你的静态变量和静态代码块执行了吗?

华为云开发者联盟

Java 类加载 静态 静态变量 静态代码块

大数据开发之Hive SQL的优化分享

@零度

大数据 Hive SQL

作业4

施正威

面试官:为什么不同返回类型不算方法重载?

王磊

科技驱动经济发展的时代全面到来

CECBC

「自我检验」熬夜总结50个Vue知识点,全都会你就是神!!!

Sunshine_Lin

面试 Vue 前端 进阶 ES6

一文了解区块链如何帮助打击虚假信息

CECBC

数据库批量插入这么讲究的么?

秦怀杂货店

Java 数据库 批量插入

Kafka原理——Kafka为何如此之快?

Kafka中文社区

潘娟:Keep open,Stay tuned 开源为我打开的全新世界 | TiDB Hackathon 2021 评委访谈

PingCAP

带你认识7种云化测试武器

华为云开发者联盟

测试 接口测试 华为云DevCloud 云化测试 Mock 服务

网络安全好学吗?基础入门篇,NMAP高级使用技巧和漏洞扫描发现

学神来啦

网络安全 渗透测试 kali基础 nmap kali Linux

nodejs 异步I/O和事件驱动

编程江湖

nodejs

一文整理区块链技术为企业带来的九大好处

CECBC

ReactNative进阶(一):ReactNative 学习资料汇总

No Silver Bullet

React Native 1月月更

Java开发之测试框架知识分享

@零度

Java

Flink类型系统的根及相关接口

编程江湖

flink

SphereEx 完成近千万美元 Pre-A 轮融资,加速构建新一代数据库生态引擎

SphereEx

开源 融资 ShardingSphere SphereEx 嘉御资本

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