React(九)React Hooks

初识Hook

我们到底为什么需要hook那?

函数组件类组件存在问题

函数组件存在的问题:

javascript 复制代码
import React, { PureComponent } from 'react'

function HelloWorld2(props) {
  let message="Hello world"

  // 函数式组件存在的缺陷:
  // 1.修改message之后,组件不会重新渲染
  // 2.就算页面重新渲染:函数会被重新执行,第二次执行时,又会重新给message赋值未Hello world
  // 3.不能编写类似生命周期的回调:网络请求...
  return (
    <div>
      <h1 onClick={e =>message="你好啊"}>内容2:{message}</h1>
      <button>修改文本</button>
    </div>
  )
}
export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <HelloWorld2 />
      </div>
    )
  }
}

export default App

class组件存在的问题:

1.复杂组件变得难以理解

  • 随着业务增加,class组件会变得越来越复杂
  • 在挂载阶段,可能包含大量的逻辑代码:网络请求、事件监听等;还得在卸载阶段移除掉
  • 逻辑往往混在一起,class难以拆分

2.更加复杂:需要搞清this的指向到底是谁,熟练ES6class

3.组件复用难

  • 状态复用需要通过高阶组件
  • 或者类似Provider、Consumer来共享一些状态,但多次使用Consumer,会导致我们代码存在很多嵌套,难以维护

Hook的出现

hooks的出现就是为了解决上述问题:

  • 它可以在不编写class的情况下使用state以及其它React特性
  • 基本可替代之前所有使用class组件的地方
  • 并不需要直接将所有的代码重构为hooks,因为它向下兼容,可渐进式使用它
  • 只能在函数组件中使用,不能在类组件中使用

Hook实现计数器

javascript 复制代码
import React, { memo,useState } from 'react'
// useState()返回的是一个数组
// 元素一:当前状态的值(第一次为初始值),如果不设置则为undefined
// 元素二:更新当前值的函数
const CounterFunction = memo(() => {
  const [counter,setCounter] = useState(0)
  return (
    <div>
      <h2>CounterFunction:{counter}</h2>
      <button onClick={e => setCounter(counter+1)}>+1</button>
      <button onClick={e => setCounter(counter-1)}>-1</button>
    </div>
  )
})

export default CounterFunction

State/Effect

useState

1.useState来自react,需要从react中导入,它是一个hook;

  • 参数:初始化值,如果不设置为undefined;
  • 返回值:数组,包含两个元素;
  • 元素一:当前状态的值(第一调用为初始化值);
  • 元素二:设置状态值的函数;

2.点击button按钮后,会完成两件事情:

  • 调用setCount,设置一个新的值;
  • 组件重新渲染,并且根据新的值返回DOM结构;

3.Hook 就是 JavaScript 函数,这个函数可以帮助你 钩入(hook into) React State以及生命周期等特性;

4.但是使用它们会有两个额外的规则:

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用

如果逻辑太复杂,也可以单独封装一个函数修改数据

javascript 复制代码
import React, { memo,useState } from 'react'

const CounterFunction = memo(() => {
  const [message,setMessage] = useState("HelloWorld")

  function changeMessage(){
    setMessage("你好呀")
  }
  return (
    <div>
      <h2>CounterFunction:{message}</h2>
      <button onClick={changeMessage}>修改文本</button>
    </div>
  )
})

export default CounterFunction

注意:为什么是useState而不是createState?

解答:因为state只在组件首次渲染时被创建,在下次渲染时,useState返回给我们当前的state。如果每次都创建新的变量,那就不该是状态了。

useEffect

它可以帮在函数组件中完成类似于class生命周期的功能。如网络请求、手动更新DOM、一些事件的监听,都是React更新DOM的一些副作用(Side Effects)。因此对于完成这些功能的Hook就被称为Effect Hook

1.基本使用

我们现在来完成一个需求:使页面的title总是显示count的数字:

代码实现:

useEffect传入一个回调函数, 这个回调函数在每次页面渲染完成后自动执行。也就是说,每次在函数式组件执行的顺序是:

执行函数组件 => 定义初始状态 => 渲染DOM => 执行useEffect中的回调=> 修改数据 => 重新执行函数组件 => 更新状态 => 渲染最新DOM => 执行useEffect中的回调

不难看出,其实useEffect中的回调相当于完成了componentDidMount和componentDidUpdate做的事情。

2.清除Effect

在类组件编写过程中,某些副作用我们需要在componentWillUnmount中进行清除,如事件总线、Redux中手动调用的subscribe等

useEffect传入的回调函数A本身有一个返回值,返回值里面是回调函数B,可在函数B中进行清除

javascript 复制代码
// 复杂告知react,在执行完当前渲染之后要执行的副作用代码
useEffect(() => {
  console.log("监听redux中数据变化");

  // 传入的回调函数,又会返回一个回调函数=> 组件被重新渲染或卸载时执行
  return () => {
    console.log("取消监听redux中的数据变化");
  }
})

3.使用多个Effect

将这些处理逻辑都放在同一个函数里面难维护,要清除也比较混乱,在使用中我们可将逻辑分离到不同的useEffect中:React 将按照 effect 声明的顺序依次调用组件中的每一个 effect;

如下图:

但是有一个问题,难道每渲染一次页面,我们的所有effect就要重新调用一次吗?

某些逻辑只需要执行一次即可,怎样才能解决这个问题嘞?

实际上,Effect有两个参数:

  • 参数一:执行的回调函数;
  • 参数二:该useEffect在哪些state发生变化时,才重新执行;(受谁的影响)
javascript 复制代码
import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [count,setCount] = useState(0)
  const [message,setMessage] = useState("HelloWorld")

  useEffect(() => {
    console.log("修改title");
  },[count])

  useEffect(() => {
    console.log("监听redux中的数据");
    return () => {
    }
  },[])

  useEffect(() => {
    console.log("监听eventBus的why事件");
    return () => {
    }
  },[])

  // 我希望它第一次渲染时执行一次即可
  useEffect(() => {
    console.log("发生网络请求");
    return () => {
      console.log("会在我们组件被卸载时才会执行");
    }
  },[]) 

  return (
    <div>
      <h2>Count-{count} </h2>
      <button onClick={e => setCount(count+1)}>+1</button>
      <button onClick={e => setMessage("你好啊")}>message({message})</button>
    </div>
  )
})

export default App

打印结果如下图:

Context/Reducer

useContext

我们之前在组件中使用类名.contextType = MyContext或MyContext.Consumer来共享数据

但是当多个Context共享时就会存在大量的嵌套:

javascript 复制代码
import React, { Component } from 'react'
import { UserContext,ThemeContext } from './context'

export default class App extends Component {
  // 使用Conetxt
  render() {
    return (
      <div>
        <UserContext.Consumer>
          {
            value => {
              return (
                <h2><ThemeContext.Consumer>
                  {value => <span>{value.color}</span>}
                  </ThemeContext.Consumer> </h2>
              )
            }
          }
        </UserContext.Consumer>
      </div>
    )
  }
}

Context Hook允许我们通过Hook来直接获取某个Context的值

javascript 复制代码
import React, { memo ,useContext} from 'react'
import { UserContext,ThemeContext } from './context'

const App = memo(() => {
  // 使用Conetxt
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)
  return (
    <div>
      <div>
        <span>用户信息-{user.name}-{user.age} </span>
        <span>主题色-{theme.color} </span>
      </div>
    </div>
  )
})

export default App

注意:当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重新渲染,并使用最新传递给 MyContext provider 的context value 值。因此,该数据的更新也是响应式的。

Callback/Memo(性能优化)

useCallback

通常使用useCallback是不希望子组件进行多次渲染,并不是为了进行函数缓存

1.存在问题

javascript 复制代码
import React, { memo,useCallback,useState } from 'react'

const HYHome = memo(function(props) {
  const { increment } = props
  console.log("HYHome被渲染")
  return (
    <div>
      <button onClick={increment}>increment+8</button>

      {/* 100个子组件 */}
    </div>
  )
})

const App = memo(() => {
  const [count, setCount] = useState(0)

  const increment = function() {
    console.log("increment");
    setCount(count + 8)
  }

  return (
    <div>
      <h2>App-{count}</h2>
      <button onClick={increment} >+8</button>
      <HYHome increment={increment}/>
    </div>
  )
})

export default App

我希望当子组件没有变化时,不需要重新渲染:

useCallback()返回一个函数的记忆值,在依赖不变的情况下,多次定义返回值是相同的

javascript 复制代码
import React, { memo, useState, useCallback, useRef } from 'react'

// useCallback性能优化的点:
// 1.当需要将一个函数传递给子组件时, 最好使用useCallback进行优化, 将优化之后的函数, 传递给子组件------这样的话在某些情况下,子组件就不会重新渲染

// props中的属性发生改变时, 组件本身就会被重新渲染
const HYHome = memo(function(props) {
  const { increment } = props
  console.log("HYHome被渲染")
  return (
    <div>
      <button onClick={increment}>increment+1</button>

      {/* 100个子组件 */}
    </div>
  )
})

const App = memo(function() {
  const [count, setCount] = useState(0)
  const [message, setMessage] = useState("hello")

  // 闭包陷阱: useCallback
  // const increment = useCallback(function foo() {
  //   console.log("increment")
  //   setCount(count+1)
  // }, [count])

  // 进一步的优化: 当count发生改变时, 也使用同一个函数(了解)
  // 做法一: 将count依赖移除掉, 缺点: 闭包陷阱
  // 做法二: useRef, 在组件多次渲染时, 返回的是同一个值
  const countRef = useRef()
  countRef.current = count
  const increment = useCallback(function foo() {
    console.log("increment")
    setCount(countRef.current + 1)
  }, [])

  // 普通的函数
  // const increment = () => {
  //   setCount(count+1)
  // }

  return (
    <div>
      <h2>计数: {count}</h2>
      <button onClick={increment}>+1</button>

      <HYHome increment={increment}/>

      <h2>message:{message}</h2>
      <button onClick={e => setMessage(Math.random())}>修改message</button>
    </div>
  )
})

export default App

useMemo

1.使用场景:

  • 有大量逻辑计算时,若逻辑输入值无变化,则无需重新计算
  • 对子组件传递相同内容对象时,若无改变则不重新执行

2.函数传入两个参数:

参数一:回调函数

参数二:[逻辑执行依赖的变量]

3.useMemo和useCallback的对比

useMemo拿到的是传入回调函数的返回值,useCallback是回调函数本身

javascript 复制代码
import React, { memo, useCallback } from 'react'
import { useMemo, useState } from 'react'


const HelloWorld = memo(function(props) {
  console.log("HelloWorld被渲染~")
  return <h2>Hello World</h2>
})


// 计算数字
function calcNumTotal(num) {
  // console.log("calcNumTotal的计算过程被调用~")
  let total = 0
  for (let i = 1; i <= num; i++) {
    total += i
  }
  return total
}

const App = memo(() => {
  const [count, setCount] = useState(0)

  // const result = calcNumTotal(50)

  // 1.不依赖任何的值, 进行计算
  const result = useMemo(() => {
    return calcNumTotal(50)
  }, [])

  // 2.依赖count
  // const result = useMemo(() => {
  //   return calcNumTotal(count*2)
  // }, [count])

  // 3.useMemo和useCallback的对比
  function fn() {}
  // const increment = useCallback(fn, [])
  // const increment2 = useMemo(() => fn, [])


  // 4.使用useMemo对子组件渲染进行优化
  // 重新渲染时会定义一个新对象,传入值是没有什么区别的
  // const info = { name: "why", age: 18 }
  const info = useMemo(() => ({name: "why", age: 18}), [])

  return (
    <div>
      <h2>计算结果: {result}</h2>
      <h2>计数器: {count}</h2>
      <button onClick={e => setCount(count+1)}>+1</button>

      <HelloWorld result={result} info={info} />
    </div>
  )
})

export default App

Ref/LayoutEffect

useRef

1.获取DOM

javascript 复制代码
import React, { memo, useRef } from 'react'

const App = memo(() => {
  const titleRef = useRef()
  const inputRef = useRef()

  function showTitleDom() {
    console.log(titleRef.current)
    inputRef.current.focus()
  }

  return (
    <div>
      <h2 ref={titleRef}>Hello World</h2>
      <input type="text" ref={inputRef} />
      <button onClick={showTitleDom}>查看title的dom</button>
    </div>
  )
})

export default App

2.useRef解决闭包陷阱问题

useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变

javascript 复制代码
import React, { memo, useRef } from 'react'
import { useCallback } from 'react'
import { useState } from 'react'

let obj = null

const App = memo(() => {
  const [count, setCount] = useState(0)
  // useRef返回的是一个不变的对象(地址不变)
  const nameRef = useRef()
  console.log(obj === nameRef)
  obj = nameRef

  // 通过useRef解决闭包陷阱
  const countRef = useRef()
  countRef.current = count

  const increment = useCallback(() => {
    setCount(countRef.current + 1)
  }, [])

  return (
    <div>
      <h2>Hello World: {count}</h2>
      <button onClick={e => setCount(count+1)}>+1</button>
      <button onClick={increment}>+1</button>
    </div>
  )
})

export default App

useImperativeHandle/useLayoutEffect(了解)

useImperativeHandle

通过forwardRef可以将子组件的DOM直接暴露给父组件,但是这样也产生了一些问题:

父组件可以拿到子组件的DOM进行任意操作,这样就有点危险了,我们有什么办法解决吗?

  • 可以通过useImperativeHandle的Hook,将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起
  • 在父组件中,使用 inputRef.current时,实际上使用的是返回的对象

代码示例:

javascript 复制代码
import React, { memo, useRef, forwardRef, useImperativeHandle } from 'react'



const HelloWorld = memo(forwardRef((props, ref) => {

  const inputRef = useRef()

  // 如果直接绑定它,权限有点多,对于子组件来说太危险了------我希望只给它保留特定的权限
  // 子组件对父组件传入的ref进行处理
  useImperativeHandle(ref, () => {
    return {
      focus() {
        console.log("focus")
        inputRef.current.focus()
      },
      setValue(value) {
        inputRef.current.value = value
      }
    }
  })

  return <input type="text" ref={inputRef}/>
}))


const App = memo(() => {
  const titleRef = useRef()
  const inputRef = useRef()

  function handleDOM() {
    // console.log(inputRef.current)
    inputRef.current.focus()
    // inputRef.current.value = ""
    inputRef.current.setValue("哈哈哈")
  }

  return (
    <div>
      <h2 ref={titleRef}>哈哈哈</h2>
      <HelloWorld ref={inputRef}/>
      <button onClick={handleDOM}>DOM操作</button>
    </div>
  )
})

export default App

useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似,事实上他们也只有一点区别而已:

  • useEffect会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新;
  • useLayoutEffect会在渲染的内容更新到DOM上之前执行,会阻塞DOM的更新;

如果我们希望在某些操作发生之后再更新DOM,那么应该将这个操作放到useLayoutEffect。

javascript 复制代码
import React, { memo, useEffect, useLayoutEffect, useState } from 'react'

const App = memo(() => {
  const [count, setCount] = useState(100)

  // 点击按钮后,会出现闪烁现象-先变成0,再变成99.xxxx,
  useEffect(() => {
    console.log("useEffect")
    if (count === 0) {
      setCount(Math.random() + 99)
    }
  })

  // 不会出现闪烁现象,直接变成99.xxxx
  useLayoutEffect(() => {
    console.log("useLayoutEffect")
    if (count === 0) {
      setCount(Math.random() + 99)
    }
  })

  console.log("App render")

  return (
    <div>
      <h2>count: {count}</h2>
      <button onClick={e => setCount(0)}>设置为0</button>
    </div>
  )
})

export default App

自定义Hook

本质:对函数代码的抽取,实现复用,减少代码逻辑

需求一:所有的组件在创建和销毁时都进行打印

javascript 复制代码
import React, { memo, useEffect, useState } from 'react'

// 自定义Hook
function useLogLife(cName) {
  useEffect(() => {
    console.log(cName + "组件被创建")
    return () => {
      console.log(cName + "组件被销毁")
    }
  }, [cName])
}

const Home = memo(() => {
  useLogLife("home")

  return <h1>Home Page</h1>
})

const About = memo(() => {
  useLogLife("about")

  return <h1>About Page</h1>
})

const App = memo(() => {
  const [isShow, setIsShow] = useState(true)

  useLogLife("app")

  return (
    <div>
      <h1>App Root Component</h1>
      <button onClick={e => setIsShow(!isShow)}>切换</button>
      { isShow && <Home/> }
      { isShow && <About/> }
    </div>
  )
})

export default App

需求二:Context的共享

1.有两个自定义的context

javascript 复制代码
import { createContext } from "react";

const UserContext = createContext()
const TokenContext = createContext()

export {
  UserContext,
  TokenContext
}

2.通过.Provider去包裹根组件

javascript 复制代码
root.render(
  <userContext.Provider value={{name:'dimple', age: 22}}>
    <tokenContext.Provider value={'dimple555'}>
      <App />
    </tokenContext.Provider>
  </userContext.Provider>
);

3.封装一个hook方法,只要一调用就能拿到共享的数据

javascript 复制代码
import { useContext } from "react"
import { UserContext, TokenContext } from "../context"

function useUserToken() {
  const user = useContext(UserContext)
  const token = useContext(TokenContext)

  return [user, token]
}

export default useUserToken

4.在子组件中使用

javascript 复制代码
import React, { memo } from 'react'
import { useUserToken } from "./hooks"

// User/Token

const Home = memo(() => {
  const [user, token] = useUserToken()

  return <h1>Home Page: {user.name}-{token}</h1>
})

const About = memo(() => {
  const [user, token] = useUserToken()

  return <h1>About Page: {user.name}-{token}</h1>
})

const App = memo(() => {
  return (
    <div>
      <h1>App Root Component</h1>
      <Home/>
      <About/>
    </div>
  )
})

export default App

需求三:获取鼠标滚动位置

1.定义一个hook

javascript 复制代码
import { useState, useEffect } from "react"

function useScrollPosition() {
  const [ scrollX, setScrollX ] = useState(0)
  const [ scrollY, setScrollY ] = useState(0)

  useEffect(() => {
    function handleScroll() {
      // console.log(window.scrollX, window.scrollY)
      setScrollX(window.scrollX)
      setScrollY(window.scrollY)
    }

    window.addEventListener("scroll", handleScroll)
    //使用完销毁
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return [scrollX, scrollY]
}

export default useScrollPosition

2.在各个组件中使用

javascript 复制代码
import React, { memo } from 'react'
import useScrollPosition from './hooks/useScrollPosition'
import "./style.css"

const Home = memo(() => {
  const [scrollX, scrollY] = useScrollPosition()

  return <h1>Home Page: {scrollX}-{scrollY}</h1>
})

const About = memo(() => {
  const [scrollX, scrollY] = useScrollPosition()

  return <h1>About Page: {scrollX}-{scrollY}</h1>
})

const App = memo(() => {
  return (
    <div className='app'>
      <h1>App Root Component</h1>
      <Home/>
      <About/>
    </div>
  )
})

export default App

redux hooks

在redux开发中,我们为了让组件和redux结合起来,我们使用了react-redux的connect,这种方式必须使用高阶函数结合返回的高阶组件,且必须编写mapStateToProps和mapDispatchToProps映射的函数,这样其实挺麻烦的

Redux7.1开始,可获取仓库的数据和方法

useSelector:将store映射到组件中

参数一:传入一个回调函数,参数为state,返回需要的数据对象

参数二:通过比较决定组件是否重新渲染

javascript 复制代码
import React, { memo } from 'react'
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { addNumberAction, changeMessageAction, subNumberAction } from './store/modules/counter'


// memo高阶组件包裹起来的组件有对应的特点: 只有props发生改变时, 才会重新渲染
//它默认会比较比较返回的两个对象是否相等,也就是必须返回两个完全相等的对象才可以不引起重新渲染
//那比如message属性值没发生改变就不该渲染该组件的,所以加了shallowEqual
const Home = memo((props) => {
  const { message } = useSelector((state) => ({
    message: state.counter.message
  }), shallowEqual)

  const dispatch = useDispatch()
  function changeMessageHandle() {
    dispatch(changeMessageAction("你好啊, 师姐!"))
  }

  console.log("Home render")

  return (
    <div>
      <h2>Home: {message}</h2>
      <button onClick={e => changeMessageHandle()}>修改message</button>
    </div>
  )
})


const App = memo((props) => {
  // 1.使用useSelector将redux中store的数据映射到组件内
  const { count } = useSelector((state) => ({
    count: state.counter.count
  }), shallowEqual)

  // 2.使用dispatch直接派发action
  const dispatch = useDispatch()
  function addNumberHandle(num, isAdd = true) {
    if (isAdd) {
      dispatch(addNumberAction(num))
    } else {
      dispatch(subNumberAction(num))
    }
  }

  console.log("App render")

  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={e => addNumberHandle(1)}>+1</button>
      <button onClick={e => addNumberHandle(6)}>+6</button>
      <button onClick={e => addNumberHandle(6, false)}>-6</button>

      <Home/>
    </div>
  )
})

export default App
相关推荐
自动花钱机14 分钟前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪29 分钟前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪35 分钟前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
snowfoootball1 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考
烛阴1 小时前
深入浅出:JavaScript ArrayBuffer 的使用与应用
前端·javascript
zhu12893035562 小时前
用Rust和WebAssembly打造轻量级前端加密工具
前端·rust·wasm
@PHARAOH2 小时前
WHAT - Electron 系列(一)
前端·javascript·electron
半句唐诗3 小时前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs3 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5123 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript