学习Hooks的第三天（Day ：10）

[XJQ124]

内容：继续学习React的内容

---

把剩下的useRef内容看了，然后看了useDebugValue、useDefferedValue 和useImperativeHandle的用法 剩下就是一些不怎么常用的hook函数了

1、useRef的三个功能

记忆功能

11.17日内容
重新写一点useRef的内容，昨天那个有点没有理清楚
一、记忆功能（与useState的区别）

//useState是指每一次修改值的时候，都会重新触发渲染
//usrRef就是说也涉及到修改值，但是这个信息不影响组件视图输出的信息，所以修改这些值，不会触发渲染
//下面这是第一种用法，渲染方面的
import { useRef } from "react"
function App(){
  const count = useRef(0)
  console.log('渲染了一次',count.current)
  const handleClick = ()=>{
    count.current += 1
  }

  return (
    <div onClick={handleClick}>
//      这是一个自增demo{count.current}
    </div>
  )
}

export default App

第二种用法：通过ref操作DOM

import { useRef } from "react"
function App(){
  const xxx = useRef(null)
  const handleClick = ()=>{
   console.dir(xxx.current )
  }

  return (
    <div ref={xxx} onClick={handleClick}> 这是一个自增demo </div>
  )
}

export default App

第三种方法：组件中ref的使用

import { forwardRef, useRef } from "react"
const  Tow =forwardRef((props,ref) => {
  return (
    <div ref={ref}> 第二个组件 </div>
  )

})

function App() {
  const xxx = useRef(null)
  const handleClick= ()=>{
    console.dir(xxx.current)

  }

  return (
    <>
      <div onClick={handleClick}> 这是一个自增demo </div>
      <Tow ref={xxx} />
    </>

  )
}

export default App

2、useDebugValue

useDebugValue 是 React Hooks 中的一个函数，用于在开发者工具中提供额外的调试信息 这部分我没有写demo，大致过了一下这个方法

3、useDefferedValue（延迟更新）

这个方法好像使用的也不是很多 作用如下： //在新内容加载期间显示旧内容。 //表明内容已过时 //延迟渲染 UI 的某些部分

4、useImperativeHandle

不得不说官档的内容真是晦涩难懂，，，官档的用法是这样说：向父组件暴露一个自定义的 ref 句柄 这个什么句柄，你正常人谁懂啊，其实就是暴露组件中的一个方法，示例如下

//子组件
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 App(){
  const sonRef = useRef(null)
  const focusHandler = ()=>{
    console.log(sonRef.current);
    sonRef.current.focusHandler()

  }
  return (
    <>
    <Son ref= {sonRef} />
    <button onClick={focusHandler}>focus</button>
    </>
  )
}
export default App

前端目前Hooks的部分就是这样，至于还有一些不常用的方法，我会抽空再看，今天下午的五点钟开始我在补前面的js基础