React函数组件Hook

问题: 相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版)

解决: React 16.8版本设计了一套新的语法来让函数组件也可以有state

• Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

• Hook也叫钩子，本质就是函数，能让你使用 React 组件的状态和生命周期函数...

• Hook 语法 基本已经代替了类组件的语法

• 后面的 React 项目就完全是用Hook语法了

Hook API 索引 – React 官方文档： Hook API 索引 – React

hook函数和普通函数的区别：

hook函数本身就是一个函数。react通过函数名来判断是普通函数还是hook函 数，以useXxx 格式命名的就是hook函数。

Hook函数使用原则：

1.不能在类组件中使用，不能在普通函数中使用

2.只能在函数组件中使用，或其他hook函数中使用【react提供的，第三方的，自定义的】

3..hook函数必须是数量确定的，不能写在逻辑判断中或后，不能写在循环中

4.应用时，一般写在顶级作用域的首行 使用场景

-----1.可以在函数组件中使用

let [msg, setMsg] = useState('')function clickHandler(){// let [count,setCount] = useState() // 普通函数会报错}

-----2.自定hook中可以使用其他hook

function useClickHandler(){let [count,setCount] = useState(0)}

-----3.如果函数名首字母大写，他会 认为是函数组件，也不会报错

 function ClickHandler(){let [count,setCount] = useState(0)}

1.useState()

作用：给函数组件添加状态

返回值：是一个数组，第一个元素是状态，第二个元素是设置状态的函数

语法：let [状态, 设置状态函数] = useState(初始值)

import React,{useState} from 'react'export default function App() {console.log('App render')let [count,setCount] = useState(0)return (<div><h3>App</h3><p>{count}</p><p><button onClick={()=>{setCount(1000)}}>count + 1</button></p></div>)
}

2.useEffect

作用：用来模拟函数组件的生命周期 componentDidMount、componentDidUpdate、ComponentWillUnmounted

2.1.用法：

useEffect(回调函数) : 没有第二个参数 模拟 componentDidMount + componentDidUpdate

useEffect(() => {console.log('useEffect') 
})

2.2.用法

useEffect(回调函数,[]) 只模拟 componentDidMount

 useEffect(()=>{console.log('useEffect')   // componentDidMount},[])

2.3.用法

useEffect(回调函数,[某 个自身状态(state) , 某个 外部状态(props), .......])

useEffect(() => { console.log('useEffect')}, [count])

2.4.用法

useEffect( return ()=>{ } )   模拟componentWillUnmount

useEffect(()=>{console.log('Test useEffect')return ()=>{ // componentWillUnmountconsole.log('destroy')}},[msg,money])

3.useRef

作用 :可以用它获取dom元素

1. 创建一个ref let divRef = useRef()

2. 绑定ref

3. 获取dom元素

import React, { useRef } from "react";
export default function App() {let divRef = useRef();return (<div><div ref={divRef}><h3>app</h3><button onClick={()=>{console.log(divRef.current);}}>获取DOM元素</button></div></div>);
}

4.useContext

作用 ：获取从祖先组件传递给后代组件的数据

4.1.创建context对象

context.js 代码

import React from 'react'
// 1. 创建context对象,并暴露出去
const context = React.createContext() 
export default context

4.2.使用Provider组件包裹 组件， 并通过 value 绑定要传的数据

App.jsx 代码

import React from "react";
import Father from "./components/Father50";
import context from "./context";
export default function App() {return (// 2. 使用Provider包裹组件，并通过value绑定要传输的数据<context.Provider value={{ name: "App的内容" }}><div><h3>App</h3><hr /><Father /></div></context.Provider>);
}

4.3. 引入context对象

4.4.通过useContext处理context对象，获取祖先组件传递的数据

import React from 'react'// 3. 引入context对象
import context from '../context'
import { useContext } from "react";export default function Father() {// 4. 通过useContext处理context对象，获取祖先组件传递的数据let {name} = useContext(context)return (<div><h4>Father</h4><p>Father-context: {name}</p><hr /></div>)
}

5.useReducer

集中状态管理。相当于是简化版的 redux

import React, { useState } from 'react'
import { useReducer } from 'react'
const initalState = { count: 0, msg: 'atguigu' }
function reducer(state, action) {switch (action.type) {case 'inc':return {...state,count: state.count + 1}case 'dec':return {...state,count: state.count - 1}case 'add':return {...state,msg:state.msg + '+'}default:throw new Error('没有处理case')}
}
export default function App() {let [state, dispatch] = useReducer(reducer, initalState)return (<div><p>count: {state.count}</p><p>msg: {state.msg}</p><p><button onClick={()=>{dispatch({type:'inc'})}}>count + 1</button></p><p><button onClick={()=>{dispatch({type:'add'})}}>msg + '+'</button></p></div>)
}

6.useCallBack

可以缓存一个函数。避免函数的多次创建。性能优化

用法一：

没有第二个参数，函数仍然会被重复创建

  let clickHandler = useCallback(() => {setCount(count + 1);});

用法二：

第二个参数是空数组，那么函数会被缓存

    let clickHandler = useCallback(()=>{// setCount(count + 1)// 函数被缓存，可以使用setXxx 第二种用法，获取最新的状态值setCount(count=>count + 1)},[])

用法三：

第二个参数是数组，并监听 x 个 状态，当这些状态中的一个或多个发生变化时，重新创建函数

  let clickHandler = useCallback(() => {setCount(count + 1);// 函数被缓存，可以使用setXxx 第二种用法，获取最新的状态值// setCount(count=>count + 1)}, [count]);

7.React.memo

作用:类似于类组件中的纯组件。当自身状态和外部数据没有变化的时候，不会重新渲染

App.jsx 代码

import React, { Component } from 'react'
import Test from './components/Test56'
export default class App extends Component {state = {msg:'React'}render() {console.log('App render')return (<div><h3>App</h3><p>msg: {this.state.msg}</p><p><button onClick={()=>this.setState({msg:'React'})}>msg change</button></p><hr /><Test msg={this.state.msg}/></div>)}
}

 Test.jsx 代码

import React from 'react'
import { useState } from 'react'function Test({msg}) {console.log('Test render')// useState已经对自身状态做过优化let [count,setCount] = useState(0)return (<div><p>count:{count}</p><p>App-msg: {msg}</p><button onClick={()=>{setCount(100)}}>count + 1</button></div>)
}export default React.memo(Test)

如图所示：

8.useMemo

作用：缓存一个函数计算的结果，常用来跟useCallback进行比较；useCallback是缓存一个 函数，useMemo缓存函数执行的结果

通俗来讲就是：它是一个优化性能的 Hook，它会记住函数的返回值，只要依赖项（dependency array）没有变化，就会复用之前的计算结果，避免在每次渲染时都重新执行这个可能开销较大的计算

官方详解：

App.jsx 代码

import React from 'react'
import Test from './components/Test57'export default function App() {return (<div><Test/></div>)
}

Tset.jsx 代码

import React, { useState,useMemo } from 'react';export default function Test() {
const [count,setCount] = useState(0)
const [val,setVal] = useState(0)const expensive = useMemo(()=>{console.log('================');let sum =0for(let i=1;i<count;i++){sum += i}return sum
},[count])// const expensive = (()=>{
//     console.log('================');
// },[count])return <div><h4>{count}-{val}-{expensive}</h4><div><button onClick={()=>setCount(count + 1)}>+c1</button><input val={val} onChange={event =>{setVal(event.target.value)}}/></div></div>;
}

9.useImperativeHandle

它与 forwardRef 结合使用以暴露自定义组件的 refs 给父组件。可以在使用 `ref` 时自定义暴露给父组件的实例值

官方文档：useImperativeHandle – React

APP.jsx 代码

import React from 'react'
import { useRef } from 'react'
import FunTest from './components/FunTest58'export default function App() {// ref可以给绑定类组件，并且可以获取类组件实例对象let refClass = useRef()// ref本身不能够给函数组件使用，但是可以通过 React.forwardRef()进行扩展let refFn = useRef('true')/*** 当希望在父组件获取子组件的dom对象的时候，可以使用 函数组件配合 React.forwardRef()实现*/return (<div><FunTest ref={refFn} /><p><button onClick={() => {console.log(refClass)console.log(refFn)}}>获取ref</button></p><p><button onClick={() => {refFn.current.changeBg()}}>changeBg</button></p><p><button onClick={() => {refFn.current.changeFontSize()}}>changeBg</button></p></div>)
}

FunTest.jsx 代码

import React from "react";
import { useRef, useImperativeHandle } from "react";function FunTest(props, AppRef) {let selRef = useRef()useImperativeHandle(AppRef,()=>({changeBg:()=>{selRef.current.style.backgroundColor = "red"}}))return (<div><h3 ref={selRef}>FunTest</h3></div>);
}
export default React.forwardRef(FunTest);

 如图所示：

10.useLayoutEffect

useLayoutEffect是useEffect的一个版本，在浏览器重新绘制屏幕之前触发。

useEffect在render结束后,你的callback函数执行,但是不会阻塞浏览器渲染

作用：用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否 则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在 浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制

官方文档：useLayoutEffect – React

App.jsx 代码

import React from 'react'
import Animate from './components/Animate59'export default function App() {return (<div><Animate/></div>)
}

Animate.jsx 代码

import React, { useEffect, useLayoutEffect, useRef } from 'react'
import TweenMax from 'gsap' // npm i gsap@3.7.0
import '../index.css'const Animate = () => {const REl = useRef(null)useLayoutEffect(()=>{TweenMax.to(REl.current,0,{x:600})},[])return (<div className="animate"><div ref={REl} className="square">square</div></div>)
}
export default Animate

11.useDebugValue

作用：用于在 React 开发者工具中显示 自定义 hook 的标签，只能在自定义hook中使用

官方文档：useDebugValue – React

12.useId

用于生成一个唯一的标识

import React from 'react'
import { useId } from 'react'export default function App() {let id1 = useId()let id2 = useId()console.log(id1);console.log(id2);return (<div><div>App</div></div>)
}

 

13.useTransition

作用：可以将任务设置为非紧急任务

官方文档：useTransition – React

const [isPending, startTransition] = useTransition()
startTransition(()=>{})

14.useDeferredValue

作用：根据一个状态，设置一个延时的状态。也可以实现，任务渲染的优先级区别

import { useState, useDeferredValue } from 'react';function SearchPage() {const [query, setQuery] = useState('');const deferredQuery = useDeferredValue(query);// ...
}

15.自定义hook函数

作用: 函数组件代码逻辑复用的手段，函数名 useXxx 格式 ，函数中可以使用其他hook函数

App.jsx 代码

import React, {useState} from 'react'
import { useEffect } from 'react'
import usePosition from '../hook/usePosition'
export default function Cat() {let {x,y} = usePosition()return (<div style={{width:100,height:100,border:'1px solid red',position:'absolute',left:x,top:y}}>Cat</div>)
}

 usePosition.js 代码

import {useState, useEffect} from 'react'
export default function usePosition() {let [x, setX] = useState(0)let [y, setY] = useState(0)function moveHandler(e) {setX(e.clientX)setY(e.clientY)}useEffect(() => {window.addEventListener('mousemove', moveHandler)return () => {window.removeEventListener('mousemove', moveHandler)}}, [])return {x,y}
}