基于React的context上下文使用

1.调用createContext方法来创建一个Context对象

//createContext(defaultValue:any):React.Context

//creactContext方法会执行以后会返回一个Context对象
//interface Context{
//  Provider:Provider; //提供者 - - 因为要绑定数据到这个对象中去，所以这个对象是一个组件
//Consumer：Consumer; 消费者
//}
//interface Context 在TS中定义一个Context接口（定义数据规则、法则）的意思
//通过接口可以得知，Context应该是一个对象，这个对象中有两个组件Provider和Consumer组件
//定义一个方法对象
const Context=createContent()
export const {Provider,Comsumer}=createContext()

在render方法里需要绑定数据值，然后把数据值进行传递

render(){
  return(
    //<Context.Provider>
  
   //</Context.Provider>
  <Provider value={
   { addEvt:this.addEvt.bind(this),
      minusEvt:this.minusEvt.bind(this) }
}>
   <Item  {...it} /> //下发组件可以直接展开运算符传值 ，需要key直接绑定
  </Provider>
)
}
//使用provider直接包裹起来 ，然后导出两个提供和消费者组件

导入消费者下发

//需要先引入对象来进行使用
import React,{Component,createContext} from 'react'

//在接收的组件里这里不用去创建实例Context实例，
//所以在这里应该引入需要使用Provider提供数据或者方法的兄弟Consumer对象

import {Comsumer} from './index'

class Button extends Component{
   render(){
    //凡是外部的数据都是在props上 -- 取在组件标签之间传递的数据，应该是使用this.props.children
   console.log(this.props)
   let _this = this  //定义this执行重新指向
   return(
   <Consumer>
   {
  function(args){
   //可以打印console.log(arguments)
  //return <button onClick={ _this.props.btnEvt.bind(null,_this.props.id,2)}>
   function(){
   if(_this.props.children === '减少'){
   //这个方法直接执行，应为绑定的函数已经定义
    args.minusEvt(_this.props.id,1)
}else{
  args.addEvt(_this.props.id,6)
 }
}
}>{_this.props.children}</button>
}
}
</Consumer>
)
 }
}

这是定义数据模拟来进行递增递减用法

class App extends Component{
  state={
  list:Array.from(Array(6),(_,i)=>{
   return{id:'id-'+i,name:'华为0'+(i + 1),price:5000,count: 1}
})
}
//更新数量的方法，可以设计为一个方法，传递一个编码，在传递一个type指定当前的操作时增加还是减少，还要传递一个递增或递减
//changeCount(id,type,step)
addEvt(id,step){
  this.setState({
   list:this.state.list.map(it =>{
   if(it.id === id) it.count +=step
   return it
})
})
}
 minusEvt(id,step){
   this.setState({
   list:this.state.list.reduce((_res,_it)=>{
  if(it.id === id) _it.count -= step
  _res.push(_it)
  return _res
},[])
})
}
  render(){}
}
export default App