react实现计算属性

react没有像vue那样间接封装一个computer计算属性，然而他有本人得实现形式，辨别是class组件还是function组件

class组件

• 通过class得get办法，能够依赖于props或者state

class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 1
        }
    }
    get otherCount() {
        return this.state.count + 1
    }
    render() {
        return <div>{this.otherCount}</div>
    }
}

• 间接在render办法外面写，因为state和props的扭转会触发render的执行

class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 1
        }
    }
    render() {
        return <div>{this.state.count + 1}</div>
    }
}

function组件

function组件能够应用useMemo

import React, { useState, useMemo } from 'react';

function Demo() {
  const [count, setCount] = useState(0);

  const double = useMemo(() => {
    return count * 2;
  }, [count])

  return (
    <div>
      {double}
    </div>
  )
}