react中Context的用法，一看就懂

举个例子 ，假如有三个组件，爷爷组件，父亲组件，孙子组件，如果孙子组件要拿到爷爷组件的中的一个值，
就组要从爷爷组件传到父亲组件在传递到孙子组件才能拿到，

万一父组件中有孙子的孙子组件，那就是一级一级的传递这样就显的很麻烦

react中使用Context就解决了这个问题
安装

//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';

那居图怎么实现呢
1.先用官方提供的叫谁家搭建一个项目

npx create-react-app my-app
cd my-app
npm start

在src目录下创建一个文件夹compontent
里面建立两个组件print.js,chils.js 也就是父亲组件 孙子组件， App.js就相当于爷爷组件

app.js

import React,{Component} from 'react';

import './App.css';
import  Fuqin from './compontent/print';
import PropTypes from 'prop-types';



class App extends Component{

static childContextTypes ={
   name:PropTypes.string
}

  state={
      name:'源码时代'
  }

  getChildContext(){
    return{name:this.state.name}
  }
   render(){
     return(
       <div className='App'>
            这是爷爷组件
            <Fuqin name={this.state.name}/>
       </div>
     )
   }

}

print.js

import React from './node_modules/react';
import  Erzi from './chils';

class Fuqin extends React.Component{
	constructor(props){
		super(props);
		
	}
	
	
	render(){
		return(
			<div>
				<div className='footer'>
                     <Erzi name={this.props.name}/>
			        	这是父亲组件
                     <p className='p'>{this.props.name}</p>是通过props组父组件拿到的值
				</div>
			</div>
		)
	}
}

export default Fuqin;

chils.js

import React,{Component} from './node_modules/react';

import PropTypes from './node_modules/prop-types';

class Fuqin extends Component{

    static contextTypes ={
        name:PropTypes.string
    }

	
	render(){
		return(
			<div>
             
				<div className='footer'>
                <p>这是孙子组件</p>
                <p className='p'>
                 {this.props.name} 
                </p>
                这是从爷爷组件一级一级传递下来的
                   <p className='p'>
                       {this.context.name}
                   </p>
                   ---直接经过context拿到爷爷组建中的值
				</div>
			</div>
		)
	}
}

export default Fuqin;

这样不管父组件中嵌套多少层子组件只要在富组件中生命好，在子组件中就能直接拿到最顶层组件中的值了
最顶层组件

需要的组件中

看懂的话请点歌个