React Native如何在生命周期中监听上下文变化

Question

概述

使用React.createContext()替换props，但也想知道子组件中发生了什么变化。因此，我使用生命周期componentWillReceiveProps或其他有nextContext参数的人。

现在，当我setState值并使用控制台nextContext或this.context时，却一无所获{}

代码

提供商

//I create a context to transmit data
const {Provider,Consumer} = React.createContext({visible:true});

export default class extends Component {
    constructor(props){
        super(props);
        this.state={
            visible:false,
        };
    }

    toggleMenus=()=>{
        let visible = this.state.visible;
        this.setState({visible:!visible})
    };



    render(){
        return (
            <Provider value={{visible:this.state.visible}}>
                <View style={{flex:1}}
                      onStartShouldSetResponder={this.toggleMenus}
                >
                    <Menus />
                </View>
            </Provider>
        )
    }
}

消费者

class Menus extends React.Component {
    componentWillReceiveProps(nextProps, nextContext) {
        console.log(nextProps, nextContext, this.context)//{},{},{}
        //I cant get nextContext to listen context change
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return false //UI still update
    }

    render(){
        return (
            <Consumer>
                {({visible})=>
                    <Text>{visible?1:2}</Text>
                }
            </Consumer>
        )
    }
}

Answer 1

我解决了。

类需要手动分配ContextObject contextType

原因

  

参考https://reactjs.org/docs/context.html#classcontexttype

可以为类的contextType属性分配由React.createContext()创建的Context对象。这样，您就可以使用this.context来消耗该Context类型的最近值。您可以在任何生命周期方法（包括render函数）中引用它。

代码

提交

- const {Provider,Consumer} = React.createContext({visible:true});
+ const MenusContext = React.createContext({visible:true});

- <Provider value={{visible:this.state.visible}}>
+ <MenusContext.Provider value={{visible:this.state.visible}}>

- <Consumer>
+ <MenusContext.Consumer>

消费者

Menus.contextType = MenusContext;

⚠️Note

shouldComponentUpdate只能听上下文的变化，因此，即使上下文return false中的shouldComponentUpdate，UI也会发生变化。