react hook整理 自己的理解

1.useState

通过创建一个state状态值XXX，通过setXXX来改变状态值。XXX可以直接使用，可以创建多个状态值。state可以任何数据类型。同时setXXX必须是返回新的一个值 这样才可以渲染成功。

  // 定义
  const [count, setCount] = useState(0)
  const [obj, setObj] = useState({ name: "张武" })
 

  return (<>
    <h3>UseState钩子 </h3>
    <div>count: {count}</div>
    <button onClick={() => { setCount(count + 1) }}>change-count</button>

    <div>obj: {obj.name}==={obj.age}</div>
    {/* 必须传递一个新的对象 */}
    <button onClick={() => { setObj({ name: "张琪" }) }}>change-Object</button>
    {/* <button onClick={() => { setObj(Object.assign(obj)) }}>change-Object</button> */}
    <button onClick={() => { setObj({ ...obj, age: "22" }) }}>change-Object</button>
    <br />
 

  </>)

 

2.useEffect

useEffect相当于三个生命周期钩子：componentDidMounted componentDidUnmounted componentDidUpdate

useEffect(() => {
  //  组件挂载完成后执行 
  console.log(count);
  return () => {
    //    组件注销时候执行
    console.log("componentDidUnMount");
  }
}, [])  //  []表示只执行性初始加载的一次执行

 

3.useMemo

 作用类似于 shouldComponentUpdate  在渲染过程中避免重复更新的问题；底层实现：Memoization  将数据存储到内存中

第一个参数：回调函数  第二个参数：数组。 在useEffect之前执行  在组件渲染之前执行

import { useMemo, useState } from 'react'

//1. 作用类似于 shouldComponentUpdate  在渲染过程中避免重复更新的问题   
// 底层实现：Memoization  将数据存储到内存中
// 第一个参数：回调函数  第二个参数：数组
// 在useEffect之前执行  在组件渲染之前执行
const UseMemo = () => {
  const [count, setCount] = useState(0)

  let res = useMemo(() => {
    return count
  }, [])
  return (<>
    <h4>useMemo更新</h4>
    <div>count:{res}</div>

    <button onClick={() => {
      setCount(count + 1)
      console.log(count)
    }}>change--count</button>
  </>)
}
export default UseMemo

 

4.useRef

import React, { useRef } from 'react'

const UseRef = () => {

  // 1.获取dom元素 或者事表单控件的value值
  // 2.保存初始变量的值
  const inputRef = useRef(null)
  const save = useRef({ val: "333" })

  return (<>
    <h3>useRef 钩子 </h3>
    <input ref={inputRef}></input>
    <button onClick={
      () => {
        // console.log(inputRef.current.value)
        console.log(save.current.val);
      }
    }>获取ref</button>
  </>)
}

export default UseRef 

 

5.useImperativeHandle

子组件自定义暴露 方法和属性的是实例值  通常和forward一起使用

 

import { forwardRef, useRef, useImperativeHandle } from 'react'
// 子组件自定义暴露 方法和属性的是实例值  通常和forward一起使用
// 不生成过多的无用标签

const Imp = forwardRef((props, refa) => {

  const inf = useRef()
  useImperativeHandle(refa, () => ({
    name: "zhangsan",
    foucs: () => {
      inf.current.focus();
    }
  })) //  暴露于父组件的对象和属性
  return (<input type="text" ref={inf} />)
})


export default () => {
  const el = useRef(null);

  return (<>
    <Imp ref={el}></Imp>
    <button onClick={() => { el.current.foucs() }}>获取子组件的属性值和方法</button>

  </>)
}

 

6.useLayoutEffect

import { useLayoutEffect, useState, useEffect } from 'react'
// 作用和useEffect一样
// 但是他是在浏览器执行绘制之前执行的  会阻塞组件的挂载  慎用
// useLayoutEffect执行在useEffect之前执行
const UseLayoutEffect = () => {
  const [count, setCount] = useState(0)

  useLayoutEffect(() => {
    console.log("useLayoutEffect");
    return () => {
      console.log("useLayoutEffect====out");
    }
  })
  useEffect(() => {
    console.log("useEffect");
    return () => {
      console.log("useEffet====out");
    }
  })

  return (<>
    <h3>useLayoutEffect钩子</h3>
  </>)
}
export default UseLayoutEffect

7.useContext

import { createContext, useContext, useState } from 'react'

// 父子组件之间传值  通过createContext来创建一个容器组件   
// 子组件通过 useContext来接受 容器组件来传递过来的值

const myContext = createContext();

console.log(myContext);

const ChildContext = () => {
  const count = useContext(myContext)

  return (<>
    <h4>我是子组件: {count}</h4>
  </>)
}

const UseContext = () => {

  const [count, setCount] = useState(0)

  return (<>
    <h2>useContext</h2>
    <myContext.Provider value={count}>
      <ChildContext></ChildContext>
    </myContext.Provider>
    <div>父组件: {count}</div>
    <button onClick={() => { setCount(count + 1) }}>change-count</button>
  </>)
}
export default UseContext

8.useCallback

import { useCallback, useState } from 'react'

// 避免组件重复渲染   可以控制组件何时更新   同理用到了缓存技术  缓存的是一个函数
// 返回的函数需要执行一下

const UseCallback = () => {
  const [count, setCount] = useState(1)
  const fn = useCallback(() => {
    console.log(count);
    return count
  }, [])  //空数组表示都避免重复渲染  [count]表示除count之外 都监听

  return (<>
    <h3>UseCallback钩子</h3>
    <div>back: {count}</div>
    <div>back: {fn()}</div>
    <button onClick={() => { setCount(count + 1) }}>changeCount</button>
  </>)
}
export default UseCallback