javascript - 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实现计算属性