React的Hooks篇介绍（下）

useMemo

这个hook和memo本身没有关系，它类似于vue中的computed,他会自动的将内部函数调用，得到结果缓存起来。当我们下次使用时，就不需要调用，直接当成数据使用即可。

import { useMemo } from "react";
import { useEffect } from "react";
import { useState } from "react";

const TestUseMemo = () => {
  let [count, setCount] = useState(0)
  let [stus, setStus] = useState([
    {
      name: "张三",
      sex: "男"
    }, {
      name: "李四",
      sex: "男"
    }, {
      name: "小红",
      sex: "女"
    }
  ])
  
  // 这个地方的boys就是对应的数组 而不是函数
  let boys = useMemo(() => {
    return stus.filter(stu => stu.sex === '男')
  }, [])


  // 这里打印的就是男生的数组  
  console.log(boys)
  

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}
 
export default TestUseMemo;

上面代码，有一个问题，如果我们stus数据发生改变时，比如新增了男生，那么boys是不会更新的。如果不更新，则我们就需要在依赖数组中， 添加对应依赖的数据，比如我们这个例子，boys需要依赖stus，那么我们就需要填入stus

let boys = useMemo(() => {
  return stus.filter(stu => stu.sex === '男')
}, [stus])

useRef

这个是用来获取DOM对象，类似于Vue中通过ref获取DOM对象的操作。

import { useEffect, useRef } from "react";

const useref = () => {
    //生成一个对应的useRef固定写法
    let pElement=useRef(null)
    useEffect(()=>{
        console.log(pElement.current);
        //这个是p标签绑定成功后pElement.current 就是我们对应的DOM对象

    },[])
    return ( 
        <div>这个是对hooks的useRef的讲解和使用
            <p ref={pElement}>这是对应的p标签</p>
        </div>
     );
}
 
export default useref;

ReactRouter的hooks

useParams

获取URL中的动态路由的参数

例如：我们有一个动态路由"/page/:id".当我们访问"/page/1"时，我们想要获得这个1，就可以通过useParams

import { useParams } from 'react-router-dom'

export default () => {
  let { id } = useParams()
}

useSearchParams

获取一个URLSearchParams对象，通过这个对象，获取到对应的query参数

例如：我们访问"/page?id=1"如果我们想要获取到id这个值

import { useSearchParams } from 'react-router-dom'

export default () => {
  let [searchParams] = useSearchParams()
  let id = searchParams.get('id')
}