搞懂React Hooks之 useState, useCallback, useEffect, useRef ，useMemo和useEffect

望京十三兄

已于 2024-08-01 14:01:04 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签：前端 reactjs hooks

于 2021-06-06 23:20:26 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27401917/article/details/116699141

React 专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解React Hooks，包括useState, useCallback, useEffect, useRef等核心Hooks的功能与使用场景，探讨其如何提升组件性能与代码可读性，以及解决状态共享和性能优化等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Hooks 是React 在 v16.8 的版本中推出的新特性，允许我们在不使用 Class 的前提下使用 state 和其他特性。

REACT两种组件：有状态组件（Class）无状态组件（Function）

UI组件: 只负责渲染页面，没有逻辑功能我们可以使用函数无状态组件来展示UI

容器组件：负责处理业务逻辑，获取数据，处理数据，传递数据，向UI组件传递参数进行渲染。通常以类组件来实现

无状态组件：就是一个函数，一般来讲，React中函数式编程的效率远远高于class类编程。类的那种定义方式，花费更高代价执行一些生命周期函数。一个类组件的性能远远不及无状态组件

Hooks解决什么问题：

this的指向问题: 忘了绑定this，各种bug频发 this.handleClick = this.handleClick.bind(this) <button onClick={() => this.handleClick(e)}>

不同的生命周期函数中反复写同一块功能的代码逻辑，不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，代码可读性更强，方便阅读维护组件树层级变浅，原本 HOC/render props 方式来复用组件状态增强功能等，增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现

React Hooks 解决的问题是状态共享是继 render-props 和 higher-order components 之后的第三种状态逻辑复用方案不会产生 JSX 嵌套地狱问题。

useMemo
useMemo(fn, arr) 主要用来解决使用React hooks产生的无用渲染的性能问题，我们可以使用useMemo方法，避免无用方法的调用。

//父组件
function App() {
  const [name, setName] = useState('名称')
  const [content,setContent] = useState('内容')
  return (
      <>
        <button onClick={() => setName(new Date().getTime())}>
            name
        </button>
        <button onClick={() => setContent(new Date().getTime())}>
            content
        </button>
        <Button name={name}>{content}</Button>
      </>
  )
}

//子组件
function Button({ name, children }) {
  function changeName(name) {
    console.log('11')
    return name + '改变name的方法'
  }
 
  const otherName =  useMemo(()=>changeName(name),[name])
  return (
      <>
        <div>{otherName}</div>
        <div>{children}</div>
      </>
 
  )
}
 
export default Button

React Hooks ---useMemo_weixin_33739523的博客-优快云博客

useCallback
useCallback()使用场景是：有一个父组件包含子组件，子组件接收一个函数作为props；如果父组件更新了子组件也会执行更新，这种更新不一定是必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。
```
const onFormChange = useCallback(
    (key: string, value: string) => {
      setFormData({
        ...formData,
        [key]: value,
      });
    },
    [formData]
)
```

useState, useCallback, useEffect, useRef

useCallback, useEffect, useRef, useState 区别及用法_MAMAsomers的博客-优快云博客_useref和usestate区别

useMemo和useEffect https://www.jianshu.com/p/94ace269414d

React Hooks

React Hooks_大灰狼的小绵羊哥哥的博客-优快云博客_reacthooks

React Hooks 存在的一些问题

Hooks 执行原理和原生JS的心智模型的差异：因为 React Hooks 是通过把组件的代码每一次更新都进行重复调用来模拟一些行为，从而导致反直觉的一些限制；
不可以条件式的调用 React force ；
Stale Closure 的心智负担：如果你不传正确的依赖数组，那么就会产生过期闭包；
必须手动声明 use Effect 依赖；
如何‘正确’使用 use Effect 是个复杂的问题；
需要 useMemo/useCallback 等手动优化，否则的话就会不知不觉的导致一些性能问题