React学习（day7)

useCallBack

作用：在组件多次重新渲染的时候缓存函数

说明：使用useCallback包裹函数后，函数可以保证在App重新渲染的时候保持引用稳定

//useCallback

import { memo, useCallback, useState } from "react"

const Input = memo(function Input({onChange}){
  console.log('子组件重新渲染了')
  return <input type="text" onChange={(e)=>onChange(e.target.value)}></input>
})
function PreUseCallback(){
  //传给子组件的函数
  // const changeHandler = (value) =>console.log(value)   //会触发子组件重新渲染
  const changeHandler = useCallback((value)=>console.log(value),[])


  //触发父组件重新渲染的函数
  const [count,setCount] = useState(0)
  return (
    <>
      {/* 将函数作为prop传递给子组件  */}
      <Input onChange={changeHandler} />
      <button onClick={()=>setCount(count + 1)}> + {count}</button>
    </>
  )
}

export default PreUseCallback

React.forwardRef

(使用ref保留DOM节点给父组件）

//React-forwardRef

import { forwardRef, useRef } from "react"

//子组件
// function Son(){
//   return <input type="text"></input>
// }

const Son = forwardRef((props,ref)=>{
  return <input type="text" ref={ref}></input>
})


function PreREactForwardRef(){
  const sonRef = useRef(null)
  const showRef = ()=>{
    console.log(sonRef)
    sonRef.current.focus()//聚焦
  }
  return (
    <>
      <Son ref={sonRef}></Son>
      <button onClick={showRef}>focus</button>
    </>
  )
}

export default PreREactForwardRef

useImperativeHandle

父组件  通过ref调用子组件内部的focus方法实现聚焦

import { forwardRef, useImperativeHandle, useRef } from "react"

const Son = forwardRef((props,ref)=>{
  //实现聚焦逻辑
  const inputRef = useRef(null)
  const focusHandler = ()=>{
    inputRef.current.focus()
  }
  
  //把聚焦方法暴露出去
  useImperativeHandle(ref,()=>{
    return {
      //暴露的方法
      focusHandler
    }
  })

  return <input type="text" ref={inputRef} />
})

function PreUseImperativeHandle(){
  const sonRef = useRef(null)
  const focusHandler = ()=>{
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef}></Son>
      <button onClick={focusHandler}>focus</button>
    </>
  )
}

export default PreUseImperativeHandle