常用的hook

最新推荐文章于 2025-03-13 16:47:37 发布

原创最新推荐文章于 2025-03-13 16:47:37 发布 · 置顶 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文深入探讨了React Hooks的引入原因、使用规则以及常见的九大Hooks，包括useState、useEffect、useContext、useReducer、useMemo、useCallback、memo、createRef与useRef以及useImperativeHandle与forwardRef的组合使用，帮助开发者更好地理解和利用Hooks进行组件优化。

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

一、为什么引入Hook?
hooks中的自定义Hook使得可以不修改组件的结构的基础上，灵活的复用组件逻辑。
class组件不能很好的压缩，并且热重载不稳定。不利于组件优化。使用Hook的函数组件不存在这些问题

二、Hook的规则
1、只能在函数组件中使用hooks 类组件中无效。
2、只能在函数最外层使用不能用于if，for等语句中，也不能用于普通js函数中。因为ReactHook通过调用顺序确定对应的state等对应的hook方法。使用语句等会改变顺序。
3、只能在以名字use开头的自定义Hook中使用

三、常用的hook
1、 useState
接受一个参数作为初始值，参数可以是常量，也可以是一个返回值的函数。
初始值如果是一个函数，在初次渲染执行；如果是一个函数的执行，每次渲染都会执行
这个是定义值的里面能直接给值也能写逻辑需要的时候里面写一个函数写一些需要的逻辑最后返回一个最终值即可

2、useEffect
它相当于是componentDidMount,componentDidUpdate,componentWillUnMount三个生命周期的合成体。
它接受两个参数，第一个是一个函数（effect），第二个参数可选，是一个数组（第一个函数中用到的可变数据集合）。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新；每次渲染，第一个函数都相当于一个新生成的函数

3、useContext
使函数组件可以具有和Class组件中的contextType属性（使可以通过this.context访问值）一样的功能。
用法和Class中contextType基本一致。接受一个context对象作为参数，返回最近的Provider提供的值。

const ThemeContext = React.createContext('dark');
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Child />
      <button onClick={() => setTheme(preTheme => preTheme === 'dark' ? 'light' : 'dark')}>切换主题</button>
    </ThemeContext.Provider>
  );
}
function Child() {
  const value = useContext(ThemeContext);
  return (
    <div>{value}</div>
  );
}

4、useReducer 可以看做useState的复合版。当应用中需要多个状态时，一般需要调用多次useState（便于组合逻辑）。随着应用逐渐扩展，会越来越复杂，此时可以使用useReducer。

5、useMemo：接受两个参数useMemo(()=>{ 立刻执行函数体，*返回一个值 },依赖) 返回一个值作用：缓存值，依赖为空的话，这个函数体永远就执行一次

6、useCallback 作用：缓存一个函数接受一个新函数 = useCallback (()=>{ 不立刻执行函数体，*返回一个函数 },依赖) 依赖不变内存地址永远不变，也只会执行一次 useCallback 和memo配合使用子类用memo包裹起来
useCallback 和 useMemo基本相同；不同点在于它返回一个函数，这个和’memorize-one’的功能相同。
7、memo()
这个是针对于子组件渲染的父元素改变子组件也会发生改变运用了memo之后依赖是空的时候子组件不会发生改变也不会重新渲染

8、React.createRef() React.useref()
这两个是定义ref的这两个使用的方法极为相似区别是React.createRef() 每次加载的时候会产生不同的缓存地址而
React.useref()每次加载的地址就是第一次加载的地址是不会变的

9、useImperativeHandle+forwardRef
该方法可以自定义（默认是DOM节点）子组件暴露给父组件的内容。
该方法基于Refs转发，需要和React.forwardRef结合使用。

import React, { useRef,useEffect, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    // 在父组件查看获取到的子组件中传递的ref的内容
    console.log(inputRef); // {current: {focus: () => {...}}}
  });
  return (
    <div>
      <FancyInputWithRef ref={inputRef} />
    </div>
  );
}
// 子组件
function FancyInput(props, ref) {
  // 自定义ref暴露的内容
  useImperativeHandle(ref, () => ({
    focus: () => ref.current.focus()
  }), [ref]);
  return(
    <div>
      <input ref={ref} />
    </div>
  );
}
// 转发ref
var FancyInputWithRef = React.forwardRef(FancyInput);

ReactDOM.render(<App/>, window.root);