React如何在类组件中订阅context的变化?

Question

class A {
    static contextType = BaseContext;
    componentDidMount(){
        // 根据BaseContext初始化一些内容
        this.doSomething();
    }
    doSomething(){
        // BaseContext 的值可能会变，需要在context值变化后执行这个函数
        this.name = this.context.name
        this.setState({
            age: this.context.age
        })
    }
}

问题：

1. BaseContext 的值可能会变，如何在context值变化后执行doSomething函数？官方说这个情况怎么做，这个是不是需要自己实现一个订阅函数传到子组件内？
2. 类组件中有类似于cpomputed（计算属性）的概念吗？上面的例子中可以转化为计算属性来优化吗？

Answer 1

用Context.Consumer

import React from 'react';
import { BaseContext } from './BaseContext';

class A extends React.Component {
  doSomething = (context) => {
    this.name = context.name;
    this.setState({
      age: context.age,
    });
  }

  render() {
    return (
      <BaseContext.Consumer>
        {context => {
          this.doSomething(context);
          return <div>Your component content</div>;
        }}
      </BaseContext.Consumer>
    );
  }
}

react类里面没有计算属性，可以用funtion,除了老项目现在都是用funtion，加hook,你可以自定以一个hooks，不过可以通过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组件可以使用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>
  )
}

转自：react实现计算属性