10-react不同层级的组件之间的数据传递数据 createContext 上下文

// 组件传值 props 接收传递过来的数据
import ReactDom from "react-dom"

import { createContext, Component } from "react"

// createContext is useed to create a context bojection from context properties 
// 返回一个对象
// Provider 提供状态 Consumer 使用状态  成对出现 和 vue 中的 provvide 和 inject 类似的
const { Provider, Consumer } = createContext()
// 使用方式： Provider 包裹要传递数据的一个组件 并在provide标签内value提供数据
// 使用 Consumer 标签包裹 就得到了传过来的数据

// 类组件中使用函数组件 和 类组件 注意区分不同的组件使用不同方式接收数据
const Hellow = () => {
 //消费组件值
 return (<Consumer  >
  123
 </Consumer>)
}
class ComClass extends Component {
 render () {
  // 可以传递任意数据
  console.log(this.props)  // 父组件传递过来的数据 子组件使用 props 接收数据
  // 特点：单向的 ，即和 vue 中的子组件不能直接修改父组件的数据 
  // 父组件更新数据 子组件随后跟随更新数据 【单向数据流】 【自定向下的数据设计格式】
  // 使用context实现跨多级别租价实现通信
  return (<>
   <h1>类组件</h1>
  </>)
 }
}
class App extends Component {
 state = {
  count: 230
 }
 render () {
  return (<Provider value={this.state.count}>
   {/* 函数组件和类组件传值都是使用name属性 */}
   <Hellow ></Hellow>
   {/* <ComClass name="迪丽热巴" age="30" gender="女"></ComClass> */}
  </Provider>)
 }
}


// 函数组件渲染到页面
ReactDom.render(<App />, document.querySelector("#root"))