当前位置：首页 > news >正文

Hook--2.useRef、useCallback、useContext、useReducer

news 来源：原创 2024/11/19 18:34:20

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.useRef

2.useCallback

（2.1）useCallback语法格式

3.useMemo

（3.1）useMemo的作用

（3.2）useMemo的语法格式

4.useContext

（4.1）useContext的基本用法

（4.2）useContext用法

1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。

2.Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。

5.useReducer

1.useRef

1.1、useRef的作用：

（1）useRef 用来获取DOM元素对象

（2）保存数据

1.2、useRef的使用示例如下：

import React,{useRef} from 'react';
export default function App() {
  const box = useRef()
    return (
        <div>
            <div ref={box}>useRef</div>
            <button onClick={() => console.log(box)}>+1</button>
        </div>
    )
}

结果如下：

useRef的简单示例如下：

import React,{useRef,useEffect} from "react";
import ReactDOM from 'react-dom'

function App(){ 
  const box = useRef()
  const age=useRef()
  useEffect(()=>{
    box.current.innerHTML="张三"
    age.current.innerHTML="20"
  },[])
    return (
        <div>
            <h1>个人信息</h1>
            当前姓名：<span ref={box}></span>
            <br></br>
            当前年龄：<span ref={age}></span>
           
        </div>
    )
}
export default App;

效果如下：

2.useCallback

useCallback是用来优化性能的，

useCallback返回一个函数，只有在依赖项变化的时候才会更新（返回一个新的函数）。

useCallback就是把我们在函数组件内部定义的函数保存起来,当组件重新渲染时还是使用之前的,就不会被重新定义一次。

（2.1）useCallback语法格式

语法格式如下：
import {useCallback} from "react"
const memoizedCallback = useCallback(callback, dependencies)
useCallback接收两个参数，第一个参数是需要被记住的函数，第二个参数是这个函数的dependencies，只有dependencies数组里面的元素的值发生变化时useCallback才会返回新定义的函数，否则useCallback都会返回之前定义的函数。

3.useMemo

（3.1）useMemo的作用

传递一个创建函数和依赖项，创建函数会需要返回一个值，只有在依赖项发生改变的时候，才会重新调用此函数，返回一个新的值。

（3.2）useMemo的语法格式

import {useMemo} from "react"
const memoizedValue = useMemo(() => valueNeededToBeMemoized, dependencies)
useMemo接收一个函数，该函数的返回值就是需要被记住的变量，当useMemo的第二个参数dependencies数组里面的元素的值没有发生变化的时候，memoizedValue使用的就是上一次的值。

useMemo 和useCallback综合案例如下：

父组件:
import React,{useState,useEffect,useCallback} from 'react'
import ReactDOM from 'react-dom'
import Box1 from "./components/Box1.jsx"

function App(){
  let [person,changePerson]=useState({name:"",birth:"",sex:""})
  useEffect(()=>{
         let arr=[
          {name:"李四",birth:"2001",sex:"男"},
          {name:"张三",birth:"2001",sex:"男"},
          {name:"marry",birth:"2008",sex:"女"}]
         changePerson(arr[0])
  },[])
  return (
    <div>
        <Box1 {...person}></Box1>
    </div>
  )
  
}
export default App;

//子组件：
import React,{useCallback} from 'react'
export default function Box1(props) {
 let test=useCallback((p)=>{

    let age=new Date().getFullYear() -new Date(p.birth).getFullYear() 
    if(age>18){
        return "成年"
    }
    return "未成年"
 },[])
 
 let canMarry=test(props)
  return (
    <div>
        <h2>个人信息</h2>
        <h3>{props.msg}</h3>
        <h3>姓名:{props.name}</h3>
        <h3>性别:{props.sex}</h3>
        <h3>出生年份:{props.birth}</h3>
        <h3>是否成人:{canMarry}</h3>
    </div>
  )
}

效果如下:

4.useContext

我们知道React中组件之间传递参数的方式是props，假如我们在父级组件中定义了某些状态，而这些状态需要在该组件深层次嵌套的子组件中被使用的话就需要将这些状态以props的形式层层传递，这就造成了props drilling的问题。为了解决这个问题，React允许我们使用Context来在父级组件和底下任意层次的子组件之间传递状态。在函数组件中我们可以使用useContext Hook来使用Context。

（4.1）useContext的基本用法

（1）根组件导入并调用createContext方法，得到Context对象，并导出
import { createContext } from 'react'
export const Context = createContext()
（2）在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据
return (
  <Context.Provider value={ 这里放要传递的数据 }>
  	需要接收数据的后代组件
  </Provider>
)
（3）需要获取公共数据的后代组件：导入useContext,并按需导入根组件中导出的Context对象；调用useContext(第一步中导出的Context) 得到value的值
import React, { useContext } from 'react'
import { Context } from './index'
const 函数组件 = () => {
    const 公共数据 = useContext(Context) // 这里的公共数据就是根组件value的值
    return ( 函数组件的内容 )
}