React Native常见钩子

前言

在 React Native 的开辟中，组件的编写方式重要分为两种：类组件和函数组件。在早期，类组件是 React 的主流开辟模式，它通过继承 React.Component 并使用生命周期方法（如 componentDidMount、componentDidUpdate 等）来管理组件的状态和逻辑。然而，随着 React 16.8 版本的发布，钩子（Hooks）的引入彻底改变了这一局面。
钩子为函数组件提供了强大的本领，使其可以或许在不编写类的情况下使用状态、副作用以及其他 React 特性。这不光简化了代码结构，还使得逻辑复用变得更加直观和灵活。对于 React Native 开辟者来说，钩子的出现意味着可以用更简洁、更函数式的方式构建应用，同时避免了类组件中常见的复杂性和冗余代码。
在这篇博客中，我们将从类组件与函数组件的对比入手，探讨为什么钩子会成为现代 React Native 开辟的首选。接着，我们会深入介绍 React Native 中常见的钩子，如 useState、useEffect、useContext 等。

---

一、钩子原理

1、类组件和函数组件

在React Native中，支持类组件和函数组件两种范例的组件，在早期的开辟中，通常都是使用类组件进行开辟，其是通过this.state和this.setState来管理状态的；

• this.state：一个对象，用于存储组件的内部状态。
  
• this.setState：一个方法，用来更新组件的状态，也就是this.state。
  

注：状态本质就是一种数据
并包含多种生命周期方法；

• 生命周期：组件从创建到销毁的整个过程，包罗挂载------>更新------>卸载三个阶段。
  
• 生命周期方法：就是在组件各个生命周期中的各个阶段可以实行的特定方法。
  

使用开辟过程：

• 首先通过继承React框架给的基类组件Component，创建一个类组件。
  
• 功能逻辑编写：状态管理、生命周期方法、事件处置惩罚函数(箭头函数)、组件间数据转达....
  

但现现在，使用类组件这种OOP(传统面向对象编程)思想的开辟方式，渐渐暴暴露一些缺点：

• 类组件在开辟时，必要编写大量重复性的代码。
  
• 在类组件中编写的相关逻辑，耦合程度较高，难以得到复用。
  
• this的指向问题，轻易必要泯灭较长的时间去寻找错误。
  
• 类组件通常编写的代码量较多，不符合现代开辟风格(代码简洁、可维护性高)。
  

而函数组件，便可以或许很好的办理这些缺点：

• 函数组件基于函数，接收 props 作为参数，返回 JSX，无this绑定，避免了this绑定问题。
  
• 函数组件本质上是纯函数，只依靠输入参数(props)产生输出，可以或许更轻易的在差异场景下复用。
  
• 函数组件的代码更加简洁、直观，符合现代前端开辟寻求的高效、易维护的风格。
  

注：JSX是JavaScript中createElement的语法糖
函数组件有那么多好处，那函数组件这样就可以完全替换类组件了吗？
其实还不行，由于函数的特性是无法保存状态的，对应函数组件，还必要引入最重要的的东西：Hooks机制(钩子)，他允许你在函数组件中“钩住”（hook into）React 的生命周期功能，从而在函数组件中实现类似类组件的状态管理和生命周期方法。
2、钩子实现原理

React 的 Hooks 实现依靠于其内部的 Fiber 架构。Fiber 是 React 的核心调度引擎，负责组件的渲染、更新和生命周期管理。

• 在组件渲染时，React 会为每个 Hook 分配一个“Fiber 节点”，用于存储状态和副作用信息。
  
• 每次组件重新渲染时，React 会根据 Fiber 节点的状态信息来决定是否必要实行对应的 Hook。
  

---

二、常见钩子

1、useState
参数：initialState，state初始化的值。
返回值：包含两个值的数组：

• 当前的state：初次渲染时与initialState雷同，可以通过set函数进行更新。
  
• set函数：将 state 更新为差异的值并触发重新渲染。
  

功能：用于在函数组件中管理状态。

1. const [当前的stae, set函数] = useState(initialState)

复制代码

2、useEffect
参数：setup：一个函数，在组件刚被渲染或每次依靠项变动重新渲染时，会使用新值运行函数。
           dependencies(可选)：setup函数中引用的所有的依靠项的列表，假如省略此参数，则在每次重新渲染组件之后，将重新运行 Effect 函数。
返回值：undefined
功能：替换类组件中的生命周期方法。

1. useEffect(setup, dependencies?)

复制代码

3、useContext
参数：SomeContext，通过Reat.createContext()，创建的上下文对象，是一个容器，用于在组件树中转达数据。
返回值：转达给迩来的SomeContext.Provider 的value属性值。假如没有找到 Prodivde，则返回在创建上下文时通过 createContext 提供的默认值。
作用：用于处置惩罚副作用（如数据获取、订阅、DOM操纵等）。

1. const value = useContext(SomeContext)

复制代码

4、useReducer
参数：reducer，用于更新state的纯函数；initialArg，state的初始值；init(可选)，盘算初始值的函数，假如存在，使用 init(initialArg) 的实行效果作为初始值，否则使用 initialArg。
返回值：state，初始值为init(initialArg) 或 initialArg；dispath函数，用于更新state并触发组件的重新渲染。
功能：用于处置惩罚复杂状态逻辑。

1. const [state, dispatch] = useReducer(reducer, initialArg, init?)

复制代码

5、useCallback
参数：fn，必要缓存的函数，会在初次渲染和dependencies改变后返回函数；dependencies，更新fn的依靠列表
返回值：fn函数
功能：用于缓存回调函数，避免不必要的重新渲染。

1. const cachedFn = useCallback(fn, dependencies)

复制代码

6、useRef
参数：initialValue：ref对象的current属性的初始值。
返回值：一个current属性的初始值为initalValue的对象。
功能：用于保存可变值（如 DOM 引用或长期化数据）。

1. const ref = useRef(initialValue)

复制代码

7、useMemo
参数：calculateValue：用于盘算值的函数；dependencies，calculateValue的依靠项列表，在页面渲染后，假如 dependencies 没有发生变化，React 将直接返回雷同值。否则，返回最新效果
返回值：cachedValue，calculateValue返回的效果。
功能：用于缓存盘算效果，避免重复盘算。

1. const cachedValue = useMemo(calculateValue, dependencies)

复制代码

8、useId
参数：无
返回值：唯一的ID(字符串)

1. const id = useId()

复制代码

---

三、总结

本篇重要介绍了类组件和函数组件，并相互进行了对比，之后引出Hooks(钩子)，详细的介绍了函数组件中的常见Hooks(钩子)。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。