react的传值问题

1:父传子

props

function father(){
   //父类传子类
   const [num setNum]=useSate(0)
  
   
   return <Child num={num} setNum={setNum}/>
}
const Child=(props)=>{
    console.log(props.name);
     //父传子
    <button onClick=()=>{props.setNum(2)}><button>
}

context使用

const nameContext=ceateContext()
function grand(){
  <nameContext provide>
    const [name,setName]=useState('aaa')
    <Child  value={{name,setName}}/>
  </nameContext provide>
}
function Child()=>{

  const a= useContext(nameContext)
    return(
        <h2>{name}</h2>
        <button onClick={()=>setName('bbb)}></button>
    )
}

memo与useCallback与useMemo的使用

useMemo返回缓存的变量，useCallback返回缓存的函数,都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值

解决问题:父组件每次刷新，子组件都会打印日志

function father(){
    //父类传子类
    const [num setNum]=useSate(0)
    const doThing=useCallback(()=>{setNum+1},[])//使用usecallback父类更改子类不会
    const doThing=useMemo(
        return ()=>{setNum+1},[]
    )
    return  <button doThing={doThing}><button>
    <Child />
 }
 const Child=memo((props)=>{
     console.log(props.name);
      //父传子
     <button onClick=()=>{props.doThing}><button>
 })