React中的“计算属性”

最新推荐文章于 2022-10-31 17:06:53 发布

走过的风景

最新推荐文章于 2022-10-31 17:06:53 发布

阅读量6.6k

点赞数

分类专栏： react 前端文章标签： React 计算属性 Vue

本文链接：https://blog.csdn.net/qq_44993284/article/details/103477423

版权

本文介绍了如何在React中实现类似Vue的计算属性功能。虽然React官方文档未提及计算属性，但可以通过getters模拟这一概念。通过一个例子展示了如何利用get关键字和componentDidMount()更新状态，以实现计算属性的效果。然而，React的这种实现方式缺乏Vue中计算属性的缓存特性，为解决此问题，可以借助第三方库memoize-one。

摘要由CSDN通过智能技术生成

React中的“计算属性”

相信许多学习过vue的小伙伴对计算属性都不陌生吧。计算属性能帮我们数据进行一些计算操作，计算属性是依赖于data里面的数据的，在vue中只要计算属性依赖的data值发生改变，则计算属性就会调用。
那React中也有计算属性吗？至少在官方文档中没有提出计算属性这个概念，但是我们想使用这个计算属性该如何是好。我们都知道vue计算属性其实是利用getter拦截data属性，根据ES6提供的get set方法，我们可以在React中实现一个计算属性。

import React, {
    Component } from 'react'
export class First extends Component {
   
  state = {
   
    name: '小怂',
    age: 18
  }
  get computed() {
   
    let {
    name, age } = this.state
    return (
      <h1>
        {
   name}+{
   age}
      </h1>
    )
  }