React Hooks的使用——useRefuseImperativeHandleuseLayoutEffect解析自定义Hook

Posted 小小白学计算机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Hooks的使用——useRefuseImperativeHandleuseLayoutEffect解析自定义Hook相关的知识,希望对你有一定的参考价值。

一、useRef

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

最常用的ref是两种用法:

  • 用法一:引入DOM(或者组件,但是需要是class组件)元素;
    案例一:引用DOM
import React, useRef from "react";

class TestCpn extends React.Component
    render() 
        return <h2>TestCpn</h2>
    


function TestCpn2(props) 
    return <h2>TestCpn2</h2>


export default function RefHookDemo01() 
    const titleRef = useRef()
    const inputRef = useRef()
    const testRef = useRef()
    const testRef2 = useRef()

    function changeDOM() 
        titleRef.current.innerhtml = 'hello world'
        inputRef.current.focus()
        console.log(testRef.current)
        console.log(testRef2.current)
    
    return (
        <div>
            <h2 ref=titleRef>RefHookDemo01</h2>
            <input type="text" ref=inputRef/>
            <TestCpn ref=testRef />
            <TestCpn2 ref=testRef2 />

            <button onClick=e => changeDOM()>修改DOM</button>
        </div>
    )


  • 用法二:保存一个数据,这个对象在整个生命周期中可以保存不变;
    案例二:使用ref保存上一次的某一个值
import React, useEffect, useRef, useState from "react";

export default function RefHookDemo02() 
    const [count, setCount] = useState(0)
    const numRef = useRef(count)

    useEffect(() => 
        numRef.current = count
    , [count])
    return (
        <div>
            /*<h2>numRef中的值: numRef.current</h2>*/
            /*<h2>count中的值: count</h2>*/
            <h2>count上一次的值:numRef.current</h2>
            <h2>count当前的值:count</h2>
            <button onClick=e => setCount(count + 10)>+10</button>
        </div>
    )


二、useImperativeHandle

useImperativeHandle并不是特别好理解,我们一点点来学习。

我们先来回顾一下ref和forwardRef结合使用:

  • 通过forwardRef可以将ref转发到子组件;
  • 子组件拿到父组件中创建的ref,绑定到自己的某一个元素中;
import React, forwardRef, useRef from "react";

const HYInput = forwardRef(
    (props,ref) => 
        return <input ref=ref type="text"/>
    
)

export default function ForwardRefDemo() 
    const inputRef = useRef()
    return (
        <div>
            <HYInput ref=inputRef/>
            <button onClick=e => inputRef.current.focus()>聚焦</button>
        </div>
    )


forwardRef的做法本身没有什么问题,但是我们是将子组件的DOM直接暴露给了父组件:

  • 直接暴露给父组件带来的问题是某些情况的不可控;
  • 父组件可以拿到DOM后进行任意的操作;
  • 但是,事实上在上面的案例中,我们只是希望父组件可以操作的focus,其他并不希望它随意操作;

通过useImperativeHandle可以只暴露固定的操作:

  • 通过useImperativeHandle的Hook,将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;
  • 所以在父组件中,使用 inputRef.current时,实际上使用的是返回的对象
  • 比如我调用了 focus函数;
import React, forwardRef, useImperativeHandle, useRef from "react";

const HYInput = forwardRef((props, ref) => 
    const inputRef = useRef()
    useImperativeHandle(ref, () => 
            return 
                focus: () => 
                    inputRef.current.focus()
                    console.log('useImperativeHandle中回调函数返回的对象里面的focus')
                
            
        , [inputRef.current])
        return <input ref=inputRef type="text"/>
    
)

export default function ForwardRefDemo02() 
    const inputRef = useRef()
    return (
        <div>
            <HYInput ref=inputRef/>
            <button onClick=e => inputRef.current.focus()>聚焦</button>
        </div>
    )


三、useLayoutEffect

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

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

如果我们希望在某些操作发生之后再更新DOM,那么应该将这个操作放到useLayoutEffect。
案例: useEffect和useLayoutEffect的对比


四、自定义Hook

自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上来说,它本身并不算React的特性。

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

  • 组件被创建:打印 组件被创建了;
  • 组件被销毁:打印 组件被销毁了;

import React, useEffect from "react";
const Home = (props) => 
    useEffect(() => 
        console.log('Home组件被创建出来了~')
        return () => 
            console.log('Home组件被销毁了!')
        
    , [])
    return <h2>Home</h2>

const Profile = (props) => 
    useEffect(() => 
        console.log('Profile组件被创建出来了~')
        return () => 
            console.log('Profile组件被销毁了!')
        
    , [])
    return <h2>Profile</h2>

export default function CustomHookLifeDemo01() 
    useEffect(() => 
        console.log('CustomHookLifeDemo01组件被创建出来了~')
        return () => 
            console.log('CustomHookLifeDemo01组件被销毁了!')
        
    , [])
    return (
        <div>
            <h2>CustomHookLifeDemo01</h2>
            <Home />
            <Profile />
        </div>
    )


import React, useEffect from "react";
const Home = (props) => 
    useLoggingLife('Home')
    return <h2>Home</h2>

const Profile = (props) => 
    useLoggingLife('Profile')
    return <h2>Profile</h2>

export default function CustomHookLifeDemo01() 
    useLoggingLife('CustomHookLifeDemo01')
    return (
        <div>
            <h2>CustomHookLifeDemo01</h2>
            <Home />
            <Profile />
        </div>
    )

function useLoggingLife(name) 
    useEffect(() => 
        console.log(`$name组件被创建出来了~`)
        return () => 
            console.log(`$name组件被销毁了!`)
        
    , [])


需求一:Context的共享


import useContext from "react";
import TokenContext, UserContext from "../App";

function useUserContext() 
    const user = useContext(UserContext)
    const token = useContext(TokenContext)
    return [user, token]


export default useUserContext

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



需求三:localStorage数据存储



以上是关于React Hooks的使用——useRefuseImperativeHandleuseLayoutEffect解析自定义Hook的主要内容,如果未能解决你的问题,请参考以下文章

ReactReact全家桶React Hooks

ReactReact全家桶React Hooks

React 16.8发布:hooks终于来了!

使用 `react-apollo-hooks` 和 `useSubscription` 钩子

React - Redux Hooks的使用细节详解

React 使用 React Hooks 从路由器获取道具