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

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

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

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

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

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