函数组件订阅Context

Context.Consumer

xxxxxxxxxx
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

xxxxxxxxxx
//ContextTest.js
render() {
        return <div>
            {/* 使用Provider组件提供数据 */}
            <MyContext.Provider value={this.state.user }>
                <NavBar />
                <MyContext.Consumer>
                    {value=><div>
                        <h3>函数组件</h3>
                        获取到的账户：{value.account}
                        </div>}
                    
                </MyContext.Consumer>
               
            </MyContext.Provider>
            

        </div>
    }

Context更新

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

xxxxxxxxxx
//ContextTest.js
 render() {
        return <div>
            <button onClick={()=>this.setState({user:{name:"百战123",account:'baizhan123'}})}>更新user</button>
            {/* 使用Provider组件提供数据 */}
            <MyContext.Provider value={this.state.user }>
                <NavBar />
                <MyContext.Consumer>
                    {value=><div>
                        <h3>函数组件</h3>
                        获取到的账户：{value.account}
                        </div>}
                    
                </MyContext.Consumer>
               
            </MyContext.Provider>
            

        </div>
    }

提示：

消费组件是否重新渲染不受shouldComponentUpdate的控制。

其父组件使用shouldComponentUpdate停止了渲染或者消费组件本身使用shouldComponentUpdate停止渲染，也不影响消费组件的继续更新。

xxxxxxxxxx
//NavBar.js
export default class NabBar extends Component {
  shouldComponentUpdate(){
      //当前这个非消费组件会停止更新渲染，但是它的子组件UserInfo是Context的消费组件，还会继续更新
    return false
  }
  render() {
    console.log('navbar')
    return (
      <div style={{height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
        NabBar的内容
        <UserInfo />
        
        </div>
    )
  }
}

xxxxxxxxxx
//UserInfo.js
import React, { Component } from 'react'
import MyContext from './MyContext'

export default class UserInfo extends Component {
    shouldComponentUpdate() {
        //虽然返回了false，但是context的值发生变化了，我还是要重新渲染的
        return false
    }
    render() {
        return (
            <div>你好，欢迎 {this.context.account}</div>
        )
    }
}

UserInfo.contextType = MyContext

实时效果反馈

1. Context的Provider的value值更改后，消费组件会___：

A 重新渲染

B 不重新渲染

答案

1=>A