react 计算属性

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