react组件传值

1.父传子

1.1父组件准备数据,父组件通过属性age直接传递给子组件

父

import React, { useState } from 'react'
import Childs from './Childs'

export default function RefUse() {
  const [age, setAge] = useState(12)
  return (
    <div>
      <button onClick={() => {
      }}>dianji</button>
      <Childs age={age} getName={(val) => console.log(val)}></Childs>
    </div>
  )
}

子

import React, { useState } from 'react'

export default function Childs(props) {
  const [uname, setUname] = useState('lisi')
  return (
    <div>
      {props.age}
    </div>
  )
}

2.子传父

1. 传入回调，子组件执行。
2. 或者使用组件的ref

父

import React, { useState } from 'react'
import Childs from './Childs'

export default function RefUse() {
  const [age, setAge] = useState(12)
  return (
    <div>
      <Childs getName={(val) => console.log(val)}></Childs>
    </div>
  )
}

子

import React, { useState } from 'react'

export default function Childs(props) {
  const [uname, setUname] = useState('lisi')
  return (
    <div>
      {props.getName(uname)}
    </div>
  )
}

3.多层级（祖孙）

使用usecontext
用于向子组件传递数据，方法。配合useReducer，管理状态
什么是上下文呢？
全局变量就是全局的上下文，全局都可以访问到它；上下文就是你运行一段代码，所要知道的所有变量
使用
1.要先创建createContex
使用createContext创建并初始化
const c = React.createContext(null) // 写在组件外面

2.Provider 指定使用的范围
在圈定的范围内，传入读操作和写操作对象，然后可以使用上下文

<C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>

3.最后使用useContext
使用useContext接受上下文，因为传入的是对象，则接受的也应该是对象

const {n,setN} = useContext(C)；

案例
注意，不在一个文件中要导出，导入c

import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'

// 创造一个上下文
const C = createContext(null);

function App(){
  const [n,setN] = useState(0)
  return(
    // 指定上下文使用范围，使用provider,并传入读数据和写入据
    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>
  )
}

function Baba(){
  return(
    <div>
      这是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文，因为传入的是对象，则接受也应该是对象
  const {n,setN} = useContext(C)
  const add=()=>{
    setN(n=>n+1)
  };
  return(
    <div>
      这是儿子:n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}


ReactDOM.render(<App />,document.getElementById('root'));

4.兄弟组件

发布订阅模式

1.创建一个bus.js 用来放订阅者和发布者的方法。

let bus = {
  arr: [],
  // 订阅者（传入回调
  subScribe(callback) {
    this.arr.push(callback)
  },
  // 发布者（执行回调，传入参数
  publish(params) {
    this.arr.forEach(callback => {
      callback && callback(params)
    })
  }

}

export default bus

组件A

import React from 'react'
import bus from '../../utiles/bus'

export default function Add() {
  return (
    <div>

      <button onClick={() => {
        bus.subScribe((val) => {
          console.log(val)
        })
      }}>加</button>
    </div>
  )
}

组件B

import React from 'react'
import bus from '../../utiles/bus'

export default function Jian() {
  return (
    <div>
      <button onClick={() => {
        bus.publish(114514)
      }}>减</button>
    </div>
  )
}

生产消费模式