React常见的hook

博主： Atigger
发布时间：2023 年 10 月 30 日
371 次浏览
关闭评论
13575字数
分类：前端

useState

useEffect

useState

const [初始值，修改值的方法] = useState( 初始值 )

我们用useState定义一个初始值，可以打印看一下结果

console.log(useState(10)) // [10, ƒ]

结果是一个数组，第0项就是我们定义的初始值，第1项则就是我们修改值的方法

我们用数组接收，就是结构出来我们需要的这两项

import React, { useState } from 'react'
import { Button } from 'antd'

export default function Home() {
  console.log(useState(10))
  // 定义简单数据类型
  const [num, setNum] = useState(10)
  // 定义复杂数据类型
  const [obj, setObj] = useState({ age: 25 })
  // 如果初始化需要进行计算得出，我们也可以传入一个函数
  const [count, setCount] = useState(() => {
    let num = 100
    // ...
    return num
  })

  const addNum = () => {
    // 修改简单数据类型，可以这样直接修改
    setNum(num + 1)
  }
  const insertName = () => {
    // 修改复杂数据类型，1. 可以利用扩展运算符 2. 也可以深拷贝一份，再进行修改
    setObj({ ...obj, name: '张三' })
  }
  const changeCount = () => {
    setCount(999)
  }

  return (
    <div>
      <h2 style={
   { textAlign: 'center' }}>Home</h2>
      <p>num的值: {num}</p>
      <Button onClick={addNum}>num+1</Button>
      <p>
        obj的值: {obj.age} - {obj.name}
      </p>
      <Button onClick={insertName}>obj新增name属性</Button>
      <p>count的值: {count}</p>
      <Button onClick={changeCount}>修改count的值</Button>
    </div>
  )
}

useState()还有一个特性，就是如果更新的数据与上次一样，React将跳过子组件的渲染及effect的执行

代码验证

父组件

import React, { useEffect, useState } from 'react'
import MusicSon from './MusicSon'
import { Button } from 'antd'

export default function Music() {
  const [num, setNum] = useState(100)

  const numAdd = () => {
    // 我们看一下值没有改变的情况下，会不会触发effect和子组件
    setNum(100)
  }

  useEffect(() => {
    console.log('初始化effect执行了')
  }, [])

  return (
    <div>
      <h2>Music</h2>
      <Button onClick={numAdd}>num不变</Button>
      <MusicSon toSon={num} />
    </div>
  )
}

子组件

import React from 'react'

export default function MusicSon(props) {
  console.log('子组件触发执行啦')

  return (
    <div>
      <h5>MusicSon</h5>
      <p>从父组件接收过来的数据:{props.toSon}</p>
    </div>
  )
}

发现只有一进来的时候触发了effect和子组件

然后我们点击按钮，这时值没有发生改变，发现控制台什么都没有输出，说明只要更新的数据与上次一样，React将跳过子组件的渲染及effect的执行

useEffect

useEffect都是在组件dom渲染更新完毕之后才执行的

利用其副作用，执行一些操作，那什么是副作用呢？

上面是文档给出的副作用，看着挺懵逼的，其实说简单点，函数的副作用就是函数除了返回值外对外界环境造成的其它影响 。不理解也没事，其实我也不太理解(😜)

常见的副作用

数据请求 ajax发送
手动修改dom
localstorage操作

下面说用法：

1.不添加依赖项

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行
1. 组件初始渲染
2. 组件更新（不管是哪个状态引起的更新）

useEffect(()=>{
    console.log('副作用执行了')
})

2. 添加空数组

组件只在首次渲染时执行一次

useEffect(()=>{
	 console.log('副作用执行了')
},[])

3. 添加特定依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
1. 组件初始渲染
2. 依赖项发生变化时

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

清除副作用

在组件被销毁时，如果有些副作用操作需要被清除(比如定时器)

语法：

useEffect(() => {

     // 副作用操作…

     return () => {

         // 写清除副作用的代码

     }

})

eg: 清除定时器案例

父组件

import React from 'react'
import { useState } from 'react'
import Son from './pages/Son'

export default function App() {
  const [flag, setFlag] = useState(true)

  return (
    <div>
      <h2>App</h2>
      <button onClick={() => setFlag(!flag)}>显示/隐藏组件</button>
      {flag && <Son></Son>}
    </div>
  )
}

子组件

import React, { useEffect } from 'react'

export default function Son() {
  // 组件进来的时候触发一个定时器
  useEffect(() => {
    let timer = setInterval(() => {
      console.log('定时器执行了')
    }, 1000)
    // 组件销毁时清除定时器
    return () => {
      // 在return里面的函数里写清除操作
      clearInterval(timer)
    }
  }, [])
  return (
    <div>
      <h3>Son</h3>
    </div>
  )
}

useEffect 发送网络请求

依赖项要是一个空数组，因为依赖项为空数组时只会在页面初始化时触发一次

import React from 'react'
import { useEffect } from 'react'

export default function App() {
  const getData = () => {
    fetch('https://cnodejs.org/api/v1/topics')
      .then((response) => response.json())
      .then((data) => console.log(data.data))
  }
  useEffect(() => {
    getData()
  }, [])

  return (
    <div>
      <h2>App</h2>
    </div>
  )
}

useRef

获取元素的真实Dom

const 变量名 = useRef(null)

我们用useRef()定义一下，然后打印一下看看

console.log(useRef(null))

可以看到，里面是有一个current属性，而这个属性里面存放的就是dom元素的内容，我们在useRef()中定义什么，current里就显示什么。需要获取那个元素的DOM，则直接让此元素的ref等于我们useRef()方法接收的变量即可

案例

在输入框中输入，我们点击按钮，获取到输入的内容

import React, { useRef } from 'react'
import { Button, Input } from 'antd'

export default function Home() {
  const ipt = useRef(null)

  const getValue = () => {
    console.log(ipt)
  }

  return (
    <div>
      <h2>Home</h2>
      <Input placeholder="请输入内容" ref={ipt} />
      <Button onClick={getValue}>提交</Button>
    </div>
  )
}

我们可以看到，current里面存放了一些属性和方法，其中的input里的value才是我们需要的

import React, { useRef } from 'react'
import { Button, Input } from 'antd'

export default function Home() {
  const ipt = useRef(null)

  const getValue = () => {
    console.log('输入的值为', ipt.current.input.value)
  }

  return (
    <div>
      <h2>Home</h2>
      <Input placeholder="请输入内容" ref={ipt} />
      <Button onClick={getValue}>提交</Button>
    </div>
  )
}

useContext

一般深层组件传值用，类似于Vue的provide和inject

传输的数据是响应式的，跨组件传输数据用
如果想要传递的数据，只在整个应用初始化的时候传递一次就可以，则可以在index.js文件中提供数据(静态)
如果传递的数据需要状态维护，则可以在app.js中提供数据(动态)

使用步骤

创建一个context的文件
使用createContext创建Context对象，并导出
在顶层组件引入，通过Provider提供数据
在底层组件引入，通过useContext函数获取数据

context.js

import { createContext } from 'react'

const Context = createContext()

export default Context

上层组件

import React, { useState } from 'react'
import Son from './pages/Son'
// 1. 引入Context
import Context from './utils/context.js'

export default function App() {
  const [msg] = useState('根组件传递的数据')

  return (
    <>
      {/* 2. 使用Provider包裹上层组件提供数据 */}
      <Context.Provider value={msg}>
        {/* 根组件 */}
        <div>
          <h2>App</h2>
          <Son></Son>
        </div>
      </Context.Provider>
    </>
  )
}

下层组件

import React, { useContext } from 'react'
import Context from '../utils/context.js'

export default function Son() {
  let val = useContext(Context)

  return (
    <div>
      <h3>Son</h3>
      <p>从根组件得到的数据 --- {val}</p>
    </div>
  )
}

useCallback

是一个带有记忆的函数，一般用作优化用

基本写法

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

接收两个参数

第一个参数是处理函数
第二个参数是一个数组，用于指定被记忆的函数更新所依赖的值

只有第二个参数数组中的值发生改变了，第一个参数的处理函数才会执行

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)

代码验证

只有第二个参数中数组中的num变化时，才会触发useCallback中的第一个函数。如果第二个参数写一个空数组，则只会执行一次

import React, { useCallback, useState } from 'react'

export default function Home() {
  const [num, setNum] = useState(10)

  const changeNum = useCallback(() => {
    setNum(num + 1)
  }, [num])

  return (
    <div>
      <h2>{num}</h2>
      <button onClick={changeNum}>改变num的值</button>
    </div>
  )
}

为什么要使用useCallback() ?

函数式组件中，定义在组件内的函数会随着状态值的更新而重新渲染，因此函数中定义的函数会被频繁定义，在父子组件的通信中这样是非常消耗性能的。使用useCallback()结合memo就可以有效的减少子组件更新频率，提高效率和性能。

代码验证

父组件

import React, { useCallback, useState } from 'react'
import HomeSon from './HomeSon'

export default function Home() {
  const [num, setNum] = useState(10)
  const [toSon, setToSon] = useState(999)

  const changeNum = useCallback(() => {
    setNum(num + 1)
  }, [num])
  const changeToSon = useCallback(() => {
    setToSon(toSon + 1)
  }, [toSon])

  return (
    <div>
      <h2>{num}</h2>
      <button onClick={changeNum}>改变num的值</button>
      <HomeSon toSon={toSon} />
      <button onClick={changeToSon}>改变传给子组件的值</button>
    </div>
  )
}

子组件

用React.memo()包裹的组件，会监听props，只有props改变了，才会触发此组件的更新

import React from 'react'

export default React.memo(function HomeSon(props) {
  const { toSon } = props
  console.log('子组件触发了')

  return (
    <div>
      <h3>HomeSon --- 从父组件接收过来的: {toSon}</h3>
    </div>
  )
})

这样的话，只有1. 初始化的时候以及 2. 子组件接收的数据发生变化时，才会触发子组件的渲染

useMemo

基本写法(作用类似于Vue的计算属性，只要依赖项不发生改变，就不会重新计算)

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

接收两个参数

第一个参数是“创建”函数，用于处理耗时计算并返回需要记录的值
第二个参数是依赖项数组，用于指定第一个参数“创建”函数更新所依赖的值

仅会在某个依赖项改变时才重新计算。传入useMemo的函数会在渲染期间执行。但是不要在这个函数内部执行与渲染无关的操作，例如副作用，副作用这类的操作属于useEffect的使用范畴。

如果没有提供依赖项数组，useMemo在每次渲染时都会计算新的值

类似于Vue的计算属性，也会进行缓存。计算结果没有改变时，函数也不会触发

代码验证

需求：c的值为a+b，我们改变a或者b，c都能计算出最新的结果

import React, { useMemo, useState } from 'react'

export default function Movie() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const aAdd = () => {
    setA(a + 1)
  }
  const bAdd = () => {
    setB(b + 1)
  }
  // 类似于Vue的计算属性
  const c = useMemo(() => {
    return a + b
  }, [a, b])

  return (
    <div>
      <p>{a}</p>
      <button onClick={aAdd}>a+</button>
      <p>{b}</p>
      <button onClick={bAdd}>b+</button>
      <p>a + b = {c}</p>
    </div>
  )
}

useMemo()的第一个函数还可以返回一段DOM

import React, { useMemo, useState } from 'react'

export default function Movie() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const aAdd = () => {
    setA(a + 1)
  }
  const bAdd = () => {
    setB(b + 1)
  }
  // 类似于Vue的计算属性
  const c = useMemo(() => {
    return <h2>a + b 计算的结果是: {a + b}</h2>
  }, [a, b])

  return (
    <div>
      <p>{a}</p>
      <button onClick={aAdd}>a+</button>
      <p>{b}</p>
      <button onClick={bAdd}>b+</button>
      <p>{c}</p>
    </div>
  )
}

useMemo()与useCallBack()的区别？

useMemo传入的函数内部需要有返回值
useMemo只能声明在函数式组件内部（不像React.memo()，可以用在组件外部）

useImperativeHandle

作用

父组件可以获取子组件的DOM元素
父组件可以获取子组件的方法
父组件可以获取子组件的属性(又叫状态，或者变量，一个意思)

使用useImperativeHandle这个hook之前，首先我们需要了解forwardRef这个方法

forwardRef()这个方法是React提供的，React.forwardRef() 或者从React结构出来进行使用

import React, { forwardRef } from 'react'

export default forwardRef(function 组件名(props, ref) { ... }

或者

import React from 'react'

export default React.forwardRef(function MoneySon(props, ref) { ... }

用forwardRef()包裹的函数式组件，可以替换函数的第二个参数。正常函数式组件第一个参数是props，第二个参数是上下文对象context。但是用forwardRef()包裹的，第二个参数就是ref（父组件中子组件标签的ref值），第一个参数还是props。

父组件

import React, { useRef } from 'react'
import MoneySon from './MoneySon'

export default function Money() {
  const pRef = useRef(null)

  const getSonP = () => {
    console.log(pRef.current)
  }

  return (
    <div>
      <h2>Money</h2>
      <button onClick={getSonP}>获取子组件的一个元素</button>
      <MoneySon ref={pRef} />
    </div>
  )
}

子组件

import React, { forwardRef } from 'react'

export default forwardRef(function MoneySon(props, ref) {

  return (
    <div>
      <h5>MoneySon</h5>
      <p ref={ref}>子组件的p</p>
      {/* <h2 ref={ele1}>1</h2>
      <h3 ref={ele2}>2</h3>
      <Button ref={btn} onClick={clickBtn}>
        点击
      </Button> */}
    </div>
  )
})

结果如图

了解了这个之后，我们再引入 useImperativeHandle() ，这个方法有3个参数

从父组件传过来的子组件标签上ref值
回调函数，返回一个对象，对象中我们可以写子组件中的变量，方法，和dom元素的ref值
依赖项数组，放在里面的依赖项发生改变时，会重新触发回调函数

父组件

import React, { useRef } from 'react'
import MoneySon from './MoneySon'

export default function Money() {
  const pRef = useRef(null)

  const getElement = () => {
    console.log(pRef.current)
    // 获取子组件的DOM
    console.log(pRef.current.pp.current)
    // 获取子组件的方法
    // pRef.current.clickBtn()
    // 获取子组件的属性(状态/变量)
    // console.log(pRef.current.sonData)
  }

  return (
    <div>
      <h2>Money</h2>
      <button onClick={getElement}>点击获取子组件多个元素</button>
      <MoneySon ref={pRef} />
    </div>
  )
}

子组件

import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import { Button } from 'antd'

export default forwardRef(function MoneySon(props, ref) {
  const pp = useRef()
  const [sonData, setSonData] = useState(100)

  const clickBtn = () => {
    console.log('按钮被点击了')
    setSonData(sonData + 1)
  }

  useImperativeHandle(ref, () => {
    return { pp, clickBtn, sonData }
  })

  return (
    <div>
      <h5>MoneySon</h5>
      <Button onClick={clickBtn}>点击</Button>
      <p ref={pp}>{sonData}</p>
    </div>
  )
})

首次点击如图

先点击几次，新增数据，然后再点击获取

原文链接：https://blog.csdn.net/qq_52845451/article/details/129792701

最后修改：2023 年 10 月 30 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

React常见的hook

Atigger • 2023 年 10 月 30 日

<div id="content_views" class="htmledit_views">目录<a href="#main-toc">useState</a><a href="#useEffect">useEffect</a><a href="#%C2%A0useRef">useRef</a><a href="#useContext">useContext</a><a href="#useCallBack">useCallback</a><a href="#useMemo">useMemo</a><a href="#useImperativeHandle">useImperativeHandle</a><hr id="hr-toc"><h4 id="main-toc">useState</h4><blockquote>const [初始值，修改值的方法] = useState( 初始值&nbsp;)</blockquote>我们用useState定义一个初始值，可以打印看一下结果<pre><code class="language-javascript">console.log(useState(10)) // [10, ƒ]</code></pre><img alt="" src="https://img-blog.csdnimg.cn/421368ca0bd24f70bc2a40ddc48db67d.png">结果是一个数组，第0项就是我们定义的初始值，第1项则就是我们修改值的方法我们用数组接收，就是结构出来我们需要的这两项<pre><code class="language-javascript">import React, { useState } from 'react'
import { Button } from 'antd'

export default function Home() {
  console.log(useState(10))
  // 定义简单数据类型
  const [num, setNum] = useState(10)
  // 定义复杂数据类型
  const [obj, setObj] = useState({ age: 25 })
  // 如果初始化需要进行计算得出，我们也可以传入一个函数
  const [count, setCount] = useState(() =&gt; {
    let num = 100
    // ...
    return num
  })

return (
 &lt;div&gt;
 &lt;h2 style={
 { textAlign: 'center' }}&gt;Home&lt;/h2&gt;
 &lt;p&gt;num的值: {num}&lt;/p&gt;
 &lt;Button onClick={addNum}&gt;num+1&lt;/Button&gt;
 &lt;p&gt;
 obj的值: {obj.age} - {obj.name}
 &lt;/p&gt;
 &lt;Button onClick={insertName}&gt;obj新增name属性&lt;/Button&gt;
 &lt;p&gt;count的值: {count}&lt;/p&gt;
 &lt;Button onClick={changeCount}&gt;修改count的值&lt;/Button&gt;
 &lt;/div&gt;
 )
}
</code></pre>useState()还有一个特性，就是如果更新的数据与上次一样，React将跳过子组件的渲染及effect的执行代码验证父组件<pre><code class="language-javascript">import React, { useEffect, useState } from 'react'
import MusicSon from './MusicSon'
import { Button } from 'antd'

export default function Music() {
  const [num, setNum] = useState(100)

const numAdd = () =&gt; {
    // 我们看一下值没有改变的情况下，会不会触发effect和子组件
    setNum(100)
  }

useEffect(() =&gt; {
    console.log('初始化effect执行了')
  }, [])

return (
 &lt;div&gt;
 &lt;h2&gt;Music&lt;/h2&gt;
 &lt;Button onClick={numAdd}&gt;num不变&lt;/Button&gt;
 &lt;MusicSon toSon={num} /&gt;
 &lt;/div&gt;
 )
}
</code></pre>子组件<pre><code class="language-javascript">import React from 'react'

export default function MusicSon(props) {
  console.log('子组件触发执行啦')

return (
 &lt;div&gt;
 &lt;h5&gt;MusicSon&lt;/h5&gt;
 &lt;p&gt;从父组件接收过来的数据:{props.toSon}&lt;/p&gt;
 &lt;/div&gt;
 )
}
</code></pre>发现只有一进来的时候触发了effect和子组件<img alt="" src="https://img-blog.csdnimg.cn/75290d87ae1446d0a3b8d63e115f88a1.png">&nbsp;然后我们点击按钮，这时值没有发生改变，发现控制台什么都没有输出，说明只要更新的数据与上次一样，React将跳过子组件的渲染及effect的执行<h4 id="useEffect">useEffect</h4><ul>
 <li><code>useEffect</code>都是在组件dom渲染更新完毕之后才执行的</li>
 </ul>利用其副作用，执行一些操作，那什么是副作用呢？<img alt="" src="https://img-blog.csdnimg.cn/e88a18318efd45d1a3342159b679139e.png">上面是文档给出的副作用，看着挺懵逼的，其实说简单点，函数的副作用就是函数除了返回值外对外界环境造成的其它影响&nbsp;。不理解也没事，其实我也不太理解(😜)常见的副作用<ol>
 <li>数据请求 ajax发送</li>
 <li>手动修改dom</li>
 <li>localstorage操作</li>
 </ol>下面说用法：<blockquote>1.不添加依赖项</blockquote><ul>
 <li>组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行 
 <ol>
 <li>组件初始渲染</li>
 <li>组件更新 （不管是哪个状态引起的更新）</li>
 </ol></li>
 </ul><pre><code class="language-javascript">useEffect(()=&gt;{
 console.log('副作用执行了')
})
</code></pre><blockquote>2. 添加空数组</blockquote><ul>
 <li>组件只在首次渲染时执行一次</li>
 </ul><pre><code class="language-javascript">useEffect(()=&gt;{
	 console.log('副作用执行了')
},[])
</code></pre><blockquote>3.&nbsp;添加特定依赖项</blockquote><ul>
 <li>副作用函数在首次渲染时执行，在依赖项发生变化时重新执行 
 <ol>
 <li>组件初始渲染</li>
 <li>依赖项发生变化时</li>
 </ol></li>
 </ul><pre><code class="language-javascript">function App() { 
 const [count, setCount] = useState(0) 
 const [name, setName] = useState('zs') 
 
 useEffect(() =&gt; { 
 console.log('副作用执行了') 
 }, [count]) 
 
 return ( 
 &lt;&gt; 
 &lt;button onClick={() =&gt; { setCount(count + 1) }}&gt;{count}&lt;/button&gt; 
 &lt;button onClick={() =&gt; { setName('cp') }}&gt;{name}&lt;/button&gt; 
 &lt;/&gt; 
 )
}
</code></pre>注意事项<ul>
 <li>useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现</li>
 </ul>清除副作用<ul>
 <li>在组件被销毁时，如果有些副作用操作需要被清除(比如定时器)</li>
 </ul>语法：<pre><code class="language-javascript">useEffect(() =&gt; {

// 副作用操作…

return () =&gt; {

// 写清除副作用的代码

}

})</code></pre>eg: 清除定时器案例父组件<pre><code class="language-javascript">import React from 'react'
import { useState } from 'react'
import Son from './pages/Son'

export default function App() {
  const [flag, setFlag] = useState(true)

return (
 &lt;div&gt;
 &lt;h2&gt;App&lt;/h2&gt;
 &lt;button onClick={() =&gt; setFlag(!flag)}&gt;显示/隐藏组件&lt;/button&gt;
 {flag &amp;&amp; &lt;Son&gt;&lt;/Son&gt;}
 &lt;/div&gt;
 )
}
</code></pre>子组件<pre><code class="language-javascript">import React, { useEffect } from 'react'

export default function Son() {
 // 组件进来的时候触发一个定时器
 useEffect(() =&gt; {
 let timer = setInterval(() =&gt; {
 console.log('定时器执行了')
 }, 1000)
 // 组件销毁时清除定时器
 return () =&gt; {
 // 在return里面的函数里写清除操作
 clearInterval(timer)
 }
 }, [])
 return (
 &lt;div&gt;
 &lt;h3&gt;Son&lt;/h3&gt;
 &lt;/div&gt;
 )
}
</code></pre><code>useEffect</code>&nbsp;发送网络请求<ul>
 <li>依赖项要是一个空数组，因为依赖项为空数组时只会在页面初始化时触发一次</li>
 </ul><pre><code class="language-javascript">import React from 'react'
import { useEffect } from 'react'

export default function App() {
  const getData = () =&gt; {
    fetch('https://cnodejs.org/api/v1/topics')
      .then((response) =&gt; response.json())
      .then((data) =&gt; console.log(data.data))
  }
  useEffect(() =&gt; {
    getData()
  }, [])

return (
 &lt;div&gt;
 &lt;h2&gt;App&lt;/h2&gt;
 &lt;/div&gt;
 )
}
</code></pre><h4 id="%C2%A0useRef">useRef</h4><ul>
 <li>获取元素的真实Dom</li>
 </ul><blockquote>const 变量名&nbsp;= useRef(null)</blockquote>我们用useRef()定义一下，然后打印一下看看<pre><code class="language-javascript">console.log(useRef(null))</code></pre><img alt="" src="https://img-blog.csdnimg.cn/05670a79c2d44d9695bbb2777424a22e.png">&nbsp;可以看到，里面是有一个current属性，而这个属性里面存放的就是dom元素的内容，我们在useRef()中定义什么，current里就显示什么。需要获取那个元素的DOM，则直接让此元素的ref等于我们useRef()方法接收的变量即可案例在输入框中输入，我们点击按钮，获取到输入的内容<pre><code class="language-javascript">import React, { useRef } from 'react'
import { Button, Input } from 'antd'

export default function Home() {
  const ipt = useRef(null)

const getValue = () =&gt; {
    console.log(ipt)
  }

return (
 &lt;div&gt;
 &lt;h2&gt;Home&lt;/h2&gt;
 &lt;Input placeholder="请输入内容" ref={ipt} /&gt;
 &lt;Button onClick={getValue}&gt;提交&lt;/Button&gt;
 &lt;/div&gt;
 )
}
</code></pre><img alt="" src="https://img-blog.csdnimg.cn/2441c05d53ae42dc8948291ba7bc8b3c.png">我们可以看到，current里面存放了一些属性和方法，其中的input里的value才是我们需要的&nbsp;<pre><code class="language-javascript">import React, { useRef } from 'react'
import { Button, Input } from 'antd'

export default function Home() {
  const ipt = useRef(null)

const getValue = () =&gt; {
    console.log('输入的值为', ipt.current.input.value)
  }

return (
 &lt;div&gt;
 &lt;h2&gt;Home&lt;/h2&gt;
 &lt;Input placeholder="请输入内容" ref={ipt} /&gt;
 &lt;Button onClick={getValue}&gt;提交&lt;/Button&gt;
 &lt;/div&gt;
 )
}
</code></pre><h4 id="useContext">useContext</h4>一般深层组件传值用，类似于Vue的provide和inject<ul>
 <li>传输的数据是响应式的，跨组件传输数据用</li>
 <li>如果想要传递的数据，只在整个应用初始化的时候传递一次就可以，则可以在<code>index.js</code>文件中提供数据(静态)</li>
 <li>如果传递的数据需要状态维护，则可以在<code>app.js</code>中提供数据(动态)</li>
 </ul>使用步骤<ol>
 <li>创建一个<code>context</code>的文件</li>
 <li>使用<code>createContext</code>创建<code>Context</code>对象，并导出</li>
 <li>在顶层组件引入，通过<code>Provider</code>提供数据</li>
 <li>在底层组件引入，通过<code>useContext</code>函数获取数据</li>
 </ol>context.js<pre><code class="language-javascript">import { createContext } from 'react'

const Context = createContext()

export default Context
</code></pre>上层组件<pre><code class="language-javascript">import React, { useState } from 'react'
import Son from './pages/Son'
// 1. 引入Context
import Context from './utils/context.js'

export default function App() {
  const [msg] = useState('根组件传递的数据')

return (
 &lt;&gt;
 {/* 2. 使用Provider包裹上层组件提供数据 */}
 &lt;Context.Provider value={msg}&gt;
 {/* 根组件 */}
 &lt;div&gt;
 &lt;h2&gt;App&lt;/h2&gt;
 &lt;Son&gt;&lt;/Son&gt;
 &lt;/div&gt;
 &lt;/Context.Provider&gt;
 &lt;/&gt;
 )
}
</code></pre>下层组件<pre><code class="language-javascript">import React, { useContext } from 'react'
import Context from '../utils/context.js'

export default function Son() {
  let val = useContext(Context)

return (
 &lt;div&gt;
 &lt;h3&gt;Son&lt;/h3&gt;
 &lt;p&gt;从根组件得到的数据 --- {val}&lt;/p&gt;
 &lt;/div&gt;
 )
}
</code></pre><h4 id="useCallBack">useCallback</h4>是一个带有记忆的函数，一般用作优化用基本写法<pre><code class="language-javascript">const memoizedCallback = useCallback(
 () =&gt; {
 doSomething(a, b);
 },
 [a, b],
);</code></pre>接收两个参数<ol>
 <li>第一个参数是处理函数</li>
 <li>第二个参数是一个数组，用于指定被记忆的函数更新所依赖的值</li>
 </ol>只有第二个参数数组中的值发生改变了，第一个参数的处理函数才会执行<blockquote><code>useCallback(fn, deps)</code>&nbsp;相当于&nbsp;<code>useMemo(() =&gt; fn, deps)</code></blockquote>代码验证<ul>
 <li>只有第二个参数中数组中的num变化时，才会触发<code>useCallback中的第一个函数。如果第二个参数写一个空数组，则只会执行一次</code></li>
 </ul><pre><code class="language-javascript">import React, { useCallback, useState } from 'react'

export default function Home() {
  const [num, setNum] = useState(10)

const changeNum = useCallback(() =&gt; {
    setNum(num + 1)
  }, [num])

return (
 &lt;div&gt;
 &lt;h2&gt;{num}&lt;/h2&gt;
 &lt;button onClick={changeNum}&gt;改变num的值&lt;/button&gt;
 &lt;/div&gt;
 )
}
</code></pre>为什么要使用useCallback() ?函数式组件中，定义在组件内的函数会随着状态值的更新而重新渲染，因此函数中定义的函数会被频繁定义，在父子组件的通信中这样是非常消耗性能的。使用useCallback()结合memo就可以有效的减少子组件更新频率，提高效率和性能。代码验证父组件<pre><code class="language-javascript">import React, { useCallback, useState } from 'react'
import HomeSon from './HomeSon'

export default function Home() {
  const [num, setNum] = useState(10)
  const [toSon, setToSon] = useState(999)

const changeNum = useCallback(() =&gt; {
    setNum(num + 1)
  }, [num])
  const changeToSon = useCallback(() =&gt; {
    setToSon(toSon + 1)
  }, [toSon])

return (
 &lt;div&gt;
 &lt;h2&gt;{num}&lt;/h2&gt;
 &lt;button onClick={changeNum}&gt;改变num的值&lt;/button&gt;
 &lt;HomeSon toSon={toSon} /&gt;
 &lt;button onClick={changeToSon}&gt;改变传给子组件的值&lt;/button&gt;
 &lt;/div&gt;
 )
}
</code></pre>子组件<ul>
 <li>用React.memo()包裹的组件，会监听props，只有props改变了，才会触发此组件的更新</li>
 </ul><pre><code class="language-javascript">import React from 'react'

export default React.memo(function HomeSon(props) {
  const { toSon } = props
  console.log('子组件触发了')

return (
 &lt;div&gt;
 &lt;h3&gt;HomeSon --- 从父组件接收过来的: {toSon}&lt;/h3&gt;
 &lt;/div&gt;
 )
})
</code></pre>这样的话，只有1. 初始化的时候以及&nbsp;2. 子组件接收的数据发生变化时，才会触发子组件的渲染<h4 id="useMemo">useMemo</h4>基本写法(作用类似于Vue的计算属性，只要依赖项不发生改变，就不会重新计算)<pre><code class="language-javascript">const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);</code></pre>接收两个参数<ol>
 <li>第一个参数是“创建”函数，用于处理耗时计算并返回需要记录的值</li>
 <li>第二个参数是依赖项数组，用于指定第一个参数“创建”函数更新所依赖的值</li>
 </ol>仅会在某个依赖项改变时才重新计算。传入useMemo的函数会在渲染期间执行。但是不要在这个函数内部执行与渲染无关的操作，例如副作用，副作用这类的操作属于useEffect的使用范畴。如果没有提供依赖项数组，useMemo在每次渲染时都会计算新的值类似于Vue的计算属性，也会进行缓存。计算结果没有改变时，函数也不会触发代码验证需求：c的值为a+b，我们改变a或者b，c都能计算出最新的结果<pre><code class="language-javascript">import React, { useMemo, useState } from 'react'

export default function Movie() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

const aAdd = () =&gt; {
    setA(a + 1)
  }
  const bAdd = () =&gt; {
    setB(b + 1)
  }
  // 类似于Vue的计算属性
  const c = useMemo(() =&gt; {
    return a + b
  }, [a, b])

return (
 &lt;div&gt;
 &lt;p&gt;{a}&lt;/p&gt;
 &lt;button onClick={aAdd}&gt;a+&lt;/button&gt;
 &lt;p&gt;{b}&lt;/p&gt;
 &lt;button onClick={bAdd}&gt;b+&lt;/button&gt;
 &lt;p&gt;a + b = {c}&lt;/p&gt;
 &lt;/div&gt;
 )
}
</code></pre>useMemo()的第一个函数还可以返回一段DOM<pre><code class="language-javascript">import React, { useMemo, useState } from 'react'

export default function Movie() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

return (
 &lt;div&gt;
 &lt;p&gt;{a}&lt;/p&gt;
 &lt;button onClick={aAdd}&gt;a+&lt;/button&gt;
 &lt;p&gt;{b}&lt;/p&gt;
 &lt;button onClick={bAdd}&gt;b+&lt;/button&gt;
 &lt;p&gt;{c}&lt;/p&gt;
 &lt;/div&gt;
 )
}
</code></pre>useMemo()与useCallBack()的区别？<ul>
 <li>useMemo传入的函数内部需要有返回值</li>
 <li>useMemo只能声明在函数式组件内部（不像React.memo()，可以用在组件外部）</li>
 </ul><h4 id="useImperativeHandle">useImperativeHandle</h4>作用<ul>
 <li>父组件可以获取子组件的DOM元素</li>
 <li>父组件可以获取子组件的方法</li>
 <li>父组件可以获取子组件的属性(又叫状态，或者变量，一个意思)</li>
 </ul>使用useImperativeHandle这个hook之前，首先我们需要了解forwardRef这个方法forwardRef()这个方法是React提供的，React.forwardRef() 或者 从React结构出来进行使用<pre><code class="language-javascript">import React, { forwardRef } from 'react'

export default forwardRef(function 组件名(props, ref) { ... }</code></pre>或者<pre><code class="language-javascript">import React from 'react'

export default React.forwardRef(function MoneySon(props, ref) { ... }</code></pre>用forwardRef()包裹的函数式组件，可以替换函数的第二个参数。正常函数式组件第一个参数是props，第二个参数是上下文对象context。但是用forwardRef()包裹的，第二个参数就是ref（父组件中子组件标签的ref值），第一个参数还是props。父组件<pre><code class="language-javascript">import React, { useRef } from 'react'
import MoneySon from './MoneySon'

export default function Money() {
  const pRef = useRef(null)

const getSonP = () =&gt; {
    console.log(pRef.current)
  }

return (
 &lt;div&gt;
 &lt;h2&gt;Money&lt;/h2&gt;
 &lt;button onClick={getSonP}&gt;获取子组件的一个元素&lt;/button&gt;
 &lt;MoneySon ref={pRef} /&gt;
 &lt;/div&gt;
 )
}
</code></pre>子组件<pre><code class="language-javascript">import React, { forwardRef } from 'react'

export default forwardRef(function MoneySon(props, ref) {

return (
 &lt;div&gt;
 &lt;h5&gt;MoneySon&lt;/h5&gt;
 &lt;p ref={ref}&gt;子组件的p&lt;/p&gt;
 {/* &lt;h2 ref={ele1}&gt;1&lt;/h2&gt;
 &lt;h3 ref={ele2}&gt;2&lt;/h3&gt;
 &lt;Button ref={btn} onClick={clickBtn}&gt;
 点击
 &lt;/Button&gt; */}
 &lt;/div&gt;
 )
})
</code></pre>结果如图<img alt="" src="https://img-blog.csdnimg.cn/434122da6d0849b7a415aada7ef346cc.png">了解了这个之后，我们再引入&nbsp;useImperativeHandle() ，这个方法有3个参数<ol>
 <li>从父组件传过来的子组件标签上ref值</li>
 <li>回调函数，返回一个对象，对象中我们可以写子组件中的变量，方法，和dom元素的ref值</li>
 <li>依赖项数组，放在里面的依赖项发生改变时，会重新触发回调函数</li>
 </ol>父组件<pre><code class="language-javascript">import React, { useRef } from 'react'
import MoneySon from './MoneySon'

export default function Money() {
  const pRef = useRef(null)

const getElement = () =&gt; {
    console.log(pRef.current)
    // 获取子组件的DOM
    console.log(pRef.current.pp.current)
    // 获取子组件的方法
    // pRef.current.clickBtn()
    // 获取子组件的属性(状态/变量)
    // console.log(pRef.current.sonData)
  }

return (
 &lt;div&gt;
 &lt;h2&gt;Money&lt;/h2&gt;
 &lt;button onClick={getElement}&gt;点击获取子组件多个元素&lt;/button&gt;
 &lt;MoneySon ref={pRef} /&gt;
 &lt;/div&gt;
 )
}
</code></pre>子组件<pre><code class="language-javascript">import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
import { Button } from 'antd'

export default forwardRef(function MoneySon(props, ref) {
  const pp = useRef()
  const [sonData, setSonData] = useState(100)

const clickBtn = () =&gt; {
    console.log('按钮被点击了')
    setSonData(sonData + 1)
  }

useImperativeHandle(ref, () =&gt; {
    return { pp, clickBtn, sonData }
  })

return (
 &lt;div&gt;
 &lt;h5&gt;MoneySon&lt;/h5&gt;
 &lt;Button onClick={clickBtn}&gt;点击&lt;/Button&gt;
 &lt;p ref={pp}&gt;{sonData}&lt;/p&gt;
 &lt;/div&gt;
 )
})
</code></pre>首次点击如图<img alt="" src="https://img-blog.csdnimg.cn/c0272dbe1637400b9d90194c8830e66c.png">先点击几次，新增数据，然后再点击获取<img alt="" src="https://img-blog.csdnimg.cn/dc0cc7aac9304a5397550fcc5ffe04b5.png">&nbsp;&nbsp;</div>原文链接：https://blog.csdn.net/qq_52845451/article/details/129792701

React常见的hook

useState

useEffect

useRef

useContext

useCallback

useMemo

useImperativeHandle

[原创]mangabz漫画网爬取

算法思想总结：模拟算法

Vue3的侦听器

Vue3的toRaw()与markRaw()

Vue3的Teleport组件

uniapp怎么定制实现一个选择器

Vue动态绑定class

C语言：字符函数和字符串函数

antd结合reactRouter实现侧边栏菜单动态渲染

C++：继承与派生

React常见的hook