React 也能“用上” computed属性

来源:http://www.chinese-glasses.com 作者:Web前端 人气:189 发布时间:2020-04-15
摘要:React 中的计算属性 }, 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 firstName:"foo", 再进一步,使用 React Hooks 优

React 中的计算属性

},

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

firstName:"foo",

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

},

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确实提供了一种更通用的一种方式来观察和响应Vue实例上的数据变动:watch属性;当你有一些数据需要随着其他数据进行便动,你会很容易滥用watch--特别是你之前使用过AngularJS.然后,通常更好的想法就是使用computed属性而不是命令式的watch回调

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() { return this.getFullName(this.state.firstName, this.state.lastName); } render() { return Fragment{this.fullName}/Fragment; }}

methods:{

计算属性以声明的方式创建依赖关系,依赖的 data 或 props 变更会触发重新计算并自动更新。计算属性是基于它们的响应式依赖进行缓存的。

return this.firstName+" "+this.lastName;

此处,我们需要用到useMemo。官方对useMemo的介绍在这里,详情请移步查看。简单的说,就是我们传入一个回调函数和一个依赖列表,React 会在依赖列表中的值变化时,调用这个回调函数,并将回调函数返回的结果进行缓存:

1:computed属性;

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

el:"#example",//定义作用域

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; }}

经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数也会发生改变;

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;}

firstName:function(val){

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

computed:{

原文:

但是如果要是使用computed来实现这个功能的话;写作如下:

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

console.log(vm.reversedMessage);

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

this.fullName=val+" "+this.lastName

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

}

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

computed:{

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

{{now}}

时间: 2019-09-28阅读: 746标签: 属性前言,关于计算属性

});

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

它需要便利一个极大的数组和做很大量的计算,然后我们可能尤其他的计算属性依赖A,

总结

}

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

el:"#demo",

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

firstName:"Foo",

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

},

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

4:computed中的属性;

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

};

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

相比而言,只要发生重新渲染,method调用总会执行该函数;

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

2:computed属性和methods属性

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

{{ message.split('').reverse().join('') }}

然而,计算属性是基于他们的依赖就行缓存的,计算属性只有在它相关的依赖发生改变时才会重新求值,这意味着只要message 还没有发生改变,多次访问reversedMessage计算属性会立刻返回之前计划算的结果,而不必再次执行函数.这也同样意味着下面的计算属性将不再更新,

});

你可以打开浏览器的控制台,自行修改;

message:"hello"//存放全局数据;

通过比较,computed的优势就出来了;

setter:function(){

reversedMessage:function(){

因为Date.now()不是响应式依赖;

lastName:function(val){

接下来我们将computed属性与methods  watch属性进行一些简单的比较;

return this.firstName+" "+this.lastName;

watch:{

get:function(){

- 就直接写两这个JS部分代码的比较吧;

},//对应上面的reversedMessage属性

});

console.log(vm.reversedMessage);

computed:{

this.lastName=names[names.length-1]

3:computed属性与watch属性;

now:function(){

data:{

fullName:"foo Bar"

data:{

var names=newValue.split('');

}

通过watch实现对变量的监控

本文由10bet发布于Web前端,转载请注明出处:React 也能“用上” computed属性

关键词:

最火资讯