React 常用Hooks 钩子学习记录

Hooks 钩子学习

useEffect

作用：指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。

理解：类似vue的mounted钩子，是一个通用的副效应钩子

用法：

1. 第一个参数是一个函数，就是要完成的副作用；
2. 第二个参数是第一个函数的依赖项只有依赖项发生变化，才会重新渲染；如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。
3. useEffect的返回值是一个可用于清理副作用效应的函数，在组件卸载时，执行该函数。如果不需要清理副效应，useEffect()就不用返回任何值。

注：

如果有多个副效应应该调用多个useEffect

示例：

import React, {  useEffect } from 'react';
function effectDemo(props:any) {
  useEffect(() => {
    const timer = setTimeout(()=>{
      console.log(props.id)
    },1000)
   return () => {
    clearTimeout(timer);
  };
  }, [props.id]);
  return <h1>Hello, {props.name}</h1>;
}

useState

作用：useState 会返回一对值：当前状态和一个让你更新它的函数，他的唯一的参数就是初始 state

用法示例：

import React, { useEffect, useState } from 'react'
function demo(props: any) {
  const [name, setName] = useState<string>('zwf')
  useEffect(() => {
    console.log(name, '---name')
  }, [name])
  const handerChangeName = () => {
    setName('zwf_')
  }
  return (
    <>
      <div className="btn">
        <span onClick={handerChangeName}>{name}</span>
      </div>
    </>
  )
}
export default demo

useCallback

作用：返回一个被缓存的函数，当依赖项改变时才会更新

注：依赖项数组不会作为参数传给回调函数。

用法示例：

import React, { useCallback, useEffect, useState } from 'react'
function demo(props: any) {
  const [name, setName] = useState<string>('zwf')
  useEffect(() => {
    console.log(name, '---name')
  }, [name])

  const memoizedCallback = useCallback(
    (count) => {
      return count
    },
    [name],
  );
  const handerChangeName = () => {
    setName('zwf_')
    console.log(memoizedCallback(1))  // 1
  }
  return (
    <>
      <div className="btn">
        <span onClick={handerChangeName}>{name}</span>
      </div>
    </>
  )
}
export default demo

useMemo

作用：返回一个被缓存的值，当依赖项改变时才会更新

用法示例：

import React, { useCallback, useEffect, useMemo, useState } from 'react'
function demo(props: any) {
  const [name, setName] = useState<string>('zwf')
  const memoValue = useMemo(() => {
    return name + '真帅'
  }, [name])
  const handerChangeName = () => {
    console.log(memoValue)
  }
  return (
    <>
      <div className="btn">
        <span onClick={handerChangeName}>{name}</span>
      </div>
    </>
  )
}
export default demo

useRef

作用：返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。返回的 ref 对象在组件的整个生命周期内保持不变。

理解：类型vue中的refs。返回ref绑定的dom元素

用法示例：

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'

function demo(props: any) {
  const [name, setName] = useState<string>('zwf')
  const inputEl: React.RefObject<HTMLInputElement> = useRef(null)

  const handerChangeName = () => {
    inputEl.current?.focus()
    console.log(inputEl.current) //   <input type="text" />
  }
  return (
    <>
      <div className="btn">
        <span onClick={handerChangeName}>{name}</span>
      </div>
      <input type="text" ref={inputEl} />
    </>
  )
}
export default demo

useImperativeHandle

作用：useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。

注：useImperativeHandle 应当与 forwardRef一起使用

用法示例：

// 子组件
import React, { forwardRef, useImperativeHandle, useRef } from 'react'

function demo(props: any, ref: React.Ref<unknown> | undefined) {
  const inputEl: React.RefObject<HTMLInputElement> = useRef(null)
  useImperativeHandle(ref, () => ({
    focus() {
      inputEl.current?.focus();
    }
  }));
  return (
    <>
      <input type="text" ref={inputEl} />
    </>
  )
}
export default forwardRef(demo)


父组件
// ==================
// 所需的所有组件
// ==================
import React, { FC, useRef } from "react";
import Demo from './demo'
// ==================
// CSS
// ==================
import "./index.less";
// ==================
// 类型声明
// ==================
import { Meeting } from "./index.type";

const MeetingPageContainer: FC = (): JSX.Element => {
  const tableRef: React.RefObject<HTMLInputElement> = useRef(null);
  const onSearch = (value: string) => {
    tableRef.current?.focus()
  };

  return (
    <>
      <Demo ref={tableRef} />
      <div className="page-meeting">
          <Input.Search size="small" placeholder="请输入会议关键词" onSearch={onSearch} />
      </div>
    </>
  );
};

export default MeetingPageContainer;