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