Context_作用

React组件中数据是通过 props 属性自上而下（由父及子）进行传递的，但是有的时候中间的一些组件可能并不需要props的值

//App.js
 return (
    <div>
      <ContextTest />
    </div>
  );

​x
//ContextTest.js
import React from 'react'
import NavBar from './NavBar'

export default class ContextTest extends React.Component{
    constructor(props){
        super(props)
        this.state={user:{name:'百战',account:'baizhan'}}
    }
    render(){
        return <div>
            <NavBar user={this.state.user}/>
        </div>
    }
}

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

export default class NabBar extends Component {
  render() {
    return (
      <div style={{height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
        NabBar的内容
        <UserInfo user={this.props.user}/>
        </div>
    )
  }
}

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

export default class UserInfo extends Component {
  render() {
    return (
      <div>你好，欢迎 {this.props.user.account}</div>
    )
  }
}

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

何时使用 Context

如果我们要在组件树中去共享某些数据，并且要避免通过中间元素传递 props，则可以使用Context来实现。