入门React第二天（函数式组件传值）

常规传值

• 父 =》子

import React, { useState } from 'react'

function Child(props) {
    return <h2>子组件{props.num}</h2>
}
export default function Father() {
  return <Child num={123}/>
}

• 子 =》父

function Child(props) {
    return (
       <>
         <h2>子组件{props.num}</h2>
         <button onClick={()=>props.changeNum(321)}></button>
       </>
    )
}
export default function Father() {
  const [num, setNum] = useState(123)
  // 提供给子组件用来修改 num 的函数
  const changeNumFn = (num) => setNum(num)
  return <Child num={num} changeNumFn={changeNum}/>
}

跟 Vue 不同的地方是：

• 父传子没太大区别
• 子传父：
  • Vue 是通过触发器将值传出，父组件对子组件进行监听
  • React 是将处理函数传递给子组件

跨代传值

import React, { useState, createContext } from 'react'

// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()

function Child() {
     return (
         <NumContext.Consumer>
            {
              ({num, setNum})=>{
                  return (
                     <>
                       <h2>子组件{num}</h2>
                       <button onClick={()=>setNum(456)}>修改Num</button>
                     </>
                  )
              }     
            }
         </NumContext.Consumer>
     )
}

const Father() => <Child />

// 顶级组件
export default function App() {
    const [num, setNum] = useState(123);
    return (
        <NumContext.Provider value={{num, setNum}}>
             <Father>
        </NumContext.Provider>
    )
}

可以使用 hooks 优化

import React, { useState, createContext, useContext } from 'react'

// 创建上下文空间 （Provider 提供者，Consumer 消费者）
const NumContext = createContext()

function Child() {
    const { num, setNum } = useContext(NumContext);
     return (
          <>
            <h2>子组件{num}</h2>
            <button onClick={()=>setNum(456)}>修改Num</button>
          </>
     )
}

const Father() => <Child />

// 顶级组件
export default function App() {
    const [num, setNum] = useState(123);
    return (
        <NumContext.Provider value={{num, setNum}}>
             <Father>
        </NumContext.Provider>
    )
}