当前位置: 首页 > news >正文

React Native Hooks开发指南

一、什么是Hooks

Hooks 是 React 16.8 的新增特性。在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 是一种在函数式组件中使用有状态函数的方法。

二、类组件

componentDidMountcomponentDidUpdate 和 componentWillUnmount 这三个函数的组合。

三、常用的Hook Api

  • useState
  • useEffect
  • useContext
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle

1、useState使用

import React, { useState } from 'react';2 import {3     SafeAreaView,4     Text,5     TouchableOpacity6 } from 'react-native';7 import Constants from './expand/dao/Constants';8 import { post } from './expand/dao/HiNet';9 export default (props: any) => {10     const [msg, setMsg] = useState('');11     const doFetch = () => {12         const formData = new FormData();13         formData.append("requestPrams", 'RN');14         post(Constants.test.api)(formData)().then(result => {15             setMsg(JSON.stringify(result));16         }).catch(e => {17             console.log(e);18             setMsg(JSON.stringify(e));19         })20     }21     return (22         <SafeAreaView>23             <TouchableOpacity onPress={doFetch}>24                 <Text>加载</Text>25             </TouchableOpacity>26             <Text>{msg}</Text>27         </SafeAreaView>28     );29 };

从上述代码中我们不难看出,在React Native中使用State Hook的主要步骤:

  1. 导入useStateimport React, { useState } from 'react';
  2. 通过useState定义state:const [msg, setMsg] = useState('');
    • msg是定义的state中一个变量,setMsg是用来修改msg变量的关联函数,它的格式是set+变量名首字母大写
  3. 修改状态:通过前面定义的关联函数setMsg修改即可setMsg(JSON.stringify(result));
  4. State Hook的作用范围:因为Hooks只能应用与函数式组件,所以通过它声明的state的作用范围是函数内。

Hook 简介 – React2、useEffect使用

import React, { useState, useEffect } from 'react';
import {SafeAreaView,StyleSheet,Text,TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: { navigation: any }) => {const [msg, setMsg] = useState('');useEffect(() => {//对应componentDidUpdatefunction handleStatusChange(status: any) {console.log(status);}const timer = setTimeout(() => {doFetch();}, 2000);// 对应componentWillUnmountreturn function cleanup() {timer && clearTimeout(timer);};});const doFetch = () => {const formData = new FormData();formData.append("requestPrams", 'RN');post(Constants.test.api)(formData)().then(result => {setMsg(JSON.stringify(result));}).catch(e => {console.log(e);setMsg(JSON.stringify(e));})}return (<SafeAreaView><TouchableOpacity onPress={doFetch}><Text>加载</Text></TouchableOpacity><Text>{msg}</Text></SafeAreaView>);
};
  • 导入useEffectimport React, { useState,useEffect } from 'react';
  • 使用useEffect来实现不同生命周期函数的hooks:
    • 直接写在useEffect(() => {}一层的会在组件装载时调用,对应componentDidMount
    • handleStatusChange对应componentDidUpdate
    • cleanup对应componentWillUnmount在组件卸载时调

3、useContext使用

const value = useContext(MyContext);

接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate,也会在组件本身使用 useContext 时重新渲染。

4、useCallback使用

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

把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子组件时,它将非常有用。

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

5、useMemo使用

把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

6、useRef使用

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。

7、useImperativeHandle使用

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用:

8、Hook useMemo useCallback 的区别

useMemo 用于优化计算开销大的操作。它会记忆一个值,只有当依赖项改变时,才会重新计算这个值。

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

在上面的例子中,computeExpensiveValue 是一个计算开销很大的函数,它依赖于变量 a 和 b。只有当 a 或 b 改变时,computeExpensiveValue 才会重新计算。

使用场景:
  • 计算开销大的值。
  • 需要重用计算结果以避免不必要的计算。
useCallback 用于优化传递给子组件的回调函数。


Hook 简介 – React
React Native Hooks开发指南

相关文章:

React Native Hooks开发指南

一、什么是Hooks Hooks 是 React 16.8 的新增特性。在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 是一种在函数式组件中使用有状态函数的方法。 二、类组件 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 三、常用…...

腾讯云AI代码助手编程挑战赛-厨房助手之AI大厨

腾讯云AI代码助手编程挑战赛-厨房助手之AI大厨 作品简介 身处当今如火箭般迅猛发展的互联网时代&#xff0c;智能聊天助手已然化身成为提升用户体验的关键利器&#xff0c;全方位渗透至人们的数字生活。 紧紧跟随着这股汹涌澎湃的时代浪潮&#xff0c;我毅然投身于极具挑战性…...

ubuntu22.04 gcc,g++从10.5切换到低版本9.5

一、安装gcc-9.5 mkdir gcc cd gcc sudo apt-get download $(apt-cache depends --recurse --no-recommends --no-suggests --no-conflicts --no-breaks --no-replaces --no-enhances --no-pre-depends gcc-9 | grep -v i386 | grep "^\w") sudo dpkg -i *.deb sudo…...

在 WSL 中使用 Jupyter Notebook 的 TensorBoard 启动问题与解决方法

在 WSL&#xff08;Windows Subsystem for Linux&#xff09;环境中&#xff0c;通过 Jupyter Notebook 使用 %tensorboard --logdir outputs有时会出现 “Timed out waiting for TensorBoard to start” 错误。常见原因通常是先前的 TensorBoard 进程尚未结束&#xff0c;占用…...

Spring Boot 2 学习全攻略

Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今快速发展的 Java 后端开发领域&#xff0c;Spring Boot 2 已然成为一股不可忽视的强大力量。它简化了 Spring 应用的初始搭建以及开发过程&#xff0c;让开发者能够更加专注于业务逻辑的实现&am…...

海豚调度DolphinScheduler-3.1.9配置windows本地开发环境

源代码下载地址https://dolphinscheduler.apache.org/zh-cn/docs/3.1.9 1.Zookeeper安装与使用 如图下载解压zookeeper安装包&#xff0c;并创建data和log目录 下载地址 https://archive.apache.org/dist/zookeeper/zookeeper-3.6.4/apache-zookeeper-3.6.4-bin.tar.gz 进入…...

【机器学习:十九、反向传播】

1. 计算图和导数 计算图的概念 计算图&#xff08;Computation Graph&#xff09;是一种有向无环图&#xff0c;用于表示数学表达式中的计算过程。每个节点表示一个操作或变量&#xff0c;每条边表示操作的依赖关系。通过计算图&#xff0c;可以轻松理解和实现反向传播。 计算…...

线形回归与小批量梯度下降实例

1、准备数据集 import numpy as np import matplotlib.pyplot as pltfrom torch.utils.data import DataLoader from torch.utils.data import TensorDataset######################################################################### #################准备若干个随机的x和…...

SpringCloud微服务:基于Nacos组件,整合Dubbo框架

dubbo和fegin的差异 一、Feign与Dubbo概述 Feign是一个声明式的Web服务客户端&#xff0c;使得编写HTTP客户端变得更简单。通过简单的注解&#xff0c;Feign将自动生成HTTP请求&#xff0c;使得服务调用更加便捷。而Dubbo是一个高性能、轻量级的Java RPC框架&#xff0c;提供了…...

Golang 简要概述

文章目录 1. Golang 的学习方向2. Golang 的应用领域2.1 区块链的应用开发2.2 后台的服务应用2.3 云计算/云服务后台应用 1. Golang 的学习方向 Go 语言&#xff0c;我们可以简单的写成 Golang 2. Golang 的应用领域 2.1 区块链的应用开发 2.2 后台的服务应用 2.3 云计算/云服…...

web前端第三次作业---制作可提交的用户注册表

制作可提交的用户注册表: 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</tit…...

教育邮箱的魔力:免费获取Adobe和JetBrains软件

今天想和大家聊聊一个超级实用的话题——如何利用Edu教育邮箱来免费获取Photoshop等Adobe系列软件&#xff0c;以及JetBrains的各种开发工具。 Edu邮箱的价值 首先&#xff0c;Edu邮箱真的是个宝藏&#xff01;如果你在学校或教育机构注册过&#xff0c;通常会获得一个这样的…...

sympy常用函数与错误笔记

文章目录 前言一、sympy基本函数介绍变量定义1. sp.Symbol("x") 或 sp.symbols("m n")2. sp.Function("y")3. func(x).diff(x, n) 定义方程与求解符号1. sp.Eq(lhs, rhs)2. 求解函数&#xff08;*代表了常用且重要&#xff0c;其他部分作为拓展&…...

47_Lua文件IO操作

文件I/O(Input/Output)操作在Lua中用于与外部文件进行交互,包括读取文件中的数据和将数据写入文件。Lua提供了两种模式来进行文件操作:简单模式和完全模式。下面将详细介绍这两种模式的基本使用。 1.简单模式 1.1 简单模式介绍 简单模式提供了基本的文件操作功能,它主要…...

nginx-lua模块处理流程

一. 简述&#xff1a; nginx的模块化设计使得每一个http模块可以只专注于完成一个独立的&#xff0c;简单的功能。一个请求的完整处理过程可以由多个http模块共同协作完成&#xff0c;这种设计具有简单性&#xff0c;测试性&#xff0c;扩展性&#xff0c;灵活性。关于nginx 的…...

【大数据】机器学习-----最开始的引路

以下是关于机器学习的一些基本信息&#xff0c;包括基本术语、假设空间、归纳偏好、发展历程、应用现状和代码示例&#xff1a; 一、基本术语 样本&#xff08;Sample&#xff09;&#xff1a; 也称为实例&#xff08;Instance&#xff09;或数据点&#xff08;Data Point&…...

【前端】自学基础算法 -- 21.图的广度优先搜索

图的广度优先搜索 简介 图的广度优先搜索&#xff0c;沿着图的宽度遍历图的节点&#xff0c;先访问离起始节点最近的节点&#xff0c;然后逐渐向外扩展。 基本步骤&#xff1a; 选择一个起始节点作为当前节点。将当前节点加入队列。当队列不为空时&#xff0c;重复以下步骤…...

ChatGPT与Claude AI:两大生成式对话模型的比较分析

自ChatGPT推出以来&#xff0c;这款强大的AI聊天机器人迅速吸引了全球的关注。其出色的对话能力和多样化的应用场景&#xff0c;成为许多人初次体验基于大规模语言模型的潜力。然而&#xff0c;在这个快速发展的领域中&#xff0c;另一款AI也在悄然崭露头角&#xff0c;那就是由…...

前端开发:盒子模型、块元素

1.border边框 *{box-sizing:border-box; } //使所有边框不再撑大盒子模型 粗细 : border-width 样式 : border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框 颜色 : border-color div { width : 200px ; height : 200px ; border : …...

升级 CentOS 7.x 系统内核到 4.4 版本

问题描述 在 CentOS 7.x 系统中&#xff0c;默认内核版本是 3.10.x&#xff0c;这个版本可能会带来一些与 Docker 和 Kubernetes 兼容性的问题&#xff0c;导致系统性能不稳定或功能异常。为了提高系统的稳定性和兼容性&#xff0c;建议升级到更高版本的内核&#xff0c;例如 …...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...