React Native Hooks开发指南
一、什么是Hooks
Hooks 是 React 16.8 的新增特性。在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 是一种在函数式组件中使用有状态函数的方法。
二、类组件
componentDidMount、componentDidUpdate 和 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的主要步骤:
- 导入
useState:import React, { useState } from 'react'; - 通过
useState定义state:const [msg, setMsg] = useState('');- msg是定义的state中一个变量,setMsg是用来修改msg变量的关联函数,它的格式是
set+变量名首字母大写
- msg是定义的state中一个变量,setMsg是用来修改msg变量的关联函数,它的格式是
- 修改状态:通过前面定义的关联函数
setMsg修改即可setMsg(JSON.stringify(result)); 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>);
};
- 导入
useEffect:import React, { useState,useEffect } from 'react'; - 使用
useEffect来实现不同生命周期函数的hooks:- 直接写在
useEffect(() => {}一层的会在组件装载时调用,对应componentDidMount handleStatusChange对应componentDidUpdatecleanup对应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大厨 作品简介 身处当今如火箭般迅猛发展的互联网时代,智能聊天助手已然化身成为提升用户体验的关键利器,全方位渗透至人们的数字生活。 紧紧跟随着这股汹涌澎湃的时代浪潮,我毅然投身于极具挑战性…...
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(Windows Subsystem for Linux)环境中,通过 Jupyter Notebook 使用 %tensorboard --logdir outputs有时会出现 “Timed out waiting for TensorBoard to start” 错误。常见原因通常是先前的 TensorBoard 进程尚未结束,占用…...
Spring Boot 2 学习全攻略
Spring Boot 2 学习资料 Spring Boot 2 学习资料 Spring Boot 2 学习资料 在当今快速发展的 Java 后端开发领域,Spring Boot 2 已然成为一股不可忽视的强大力量。它简化了 Spring 应用的初始搭建以及开发过程,让开发者能够更加专注于业务逻辑的实现&am…...
海豚调度DolphinScheduler-3.1.9配置windows本地开发环境
源代码下载地址https://dolphinscheduler.apache.org/zh-cn/docs/3.1.9 1.Zookeeper安装与使用 如图下载解压zookeeper安装包,并创建data和log目录 下载地址 https://archive.apache.org/dist/zookeeper/zookeeper-3.6.4/apache-zookeeper-3.6.4-bin.tar.gz 进入…...
【机器学习:十九、反向传播】
1. 计算图和导数 计算图的概念 计算图(Computation Graph)是一种有向无环图,用于表示数学表达式中的计算过程。每个节点表示一个操作或变量,每条边表示操作的依赖关系。通过计算图,可以轻松理解和实现反向传播。 计算…...
线形回归与小批量梯度下降实例
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服务客户端,使得编写HTTP客户端变得更简单。通过简单的注解,Feign将自动生成HTTP请求,使得服务调用更加便捷。而Dubbo是一个高性能、轻量级的Java RPC框架,提供了…...
Golang 简要概述
文章目录 1. Golang 的学习方向2. Golang 的应用领域2.1 区块链的应用开发2.2 后台的服务应用2.3 云计算/云服务后台应用 1. Golang 的学习方向 Go 语言,我们可以简单的写成 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系列软件,以及JetBrains的各种开发工具。 Edu邮箱的价值 首先,Edu邮箱真的是个宝藏!如果你在学校或教育机构注册过,通常会获得一个这样的…...
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. 求解函数(*代表了常用且重要,其他部分作为拓展&…...
47_Lua文件IO操作
文件I/O(Input/Output)操作在Lua中用于与外部文件进行交互,包括读取文件中的数据和将数据写入文件。Lua提供了两种模式来进行文件操作:简单模式和完全模式。下面将详细介绍这两种模式的基本使用。 1.简单模式 1.1 简单模式介绍 简单模式提供了基本的文件操作功能,它主要…...
nginx-lua模块处理流程
一. 简述: nginx的模块化设计使得每一个http模块可以只专注于完成一个独立的,简单的功能。一个请求的完整处理过程可以由多个http模块共同协作完成,这种设计具有简单性,测试性,扩展性,灵活性。关于nginx 的…...
【大数据】机器学习-----最开始的引路
以下是关于机器学习的一些基本信息,包括基本术语、假设空间、归纳偏好、发展历程、应用现状和代码示例: 一、基本术语 样本(Sample): 也称为实例(Instance)或数据点(Data Point&…...
【前端】自学基础算法 -- 21.图的广度优先搜索
图的广度优先搜索 简介 图的广度优先搜索,沿着图的宽度遍历图的节点,先访问离起始节点最近的节点,然后逐渐向外扩展。 基本步骤: 选择一个起始节点作为当前节点。将当前节点加入队列。当队列不为空时,重复以下步骤…...
ChatGPT与Claude AI:两大生成式对话模型的比较分析
自ChatGPT推出以来,这款强大的AI聊天机器人迅速吸引了全球的关注。其出色的对话能力和多样化的应用场景,成为许多人初次体验基于大规模语言模型的潜力。然而,在这个快速发展的领域中,另一款AI也在悄然崭露头角,那就是由…...
前端开发:盒子模型、块元素
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 系统中,默认内核版本是 3.10.x,这个版本可能会带来一些与 Docker 和 Kubernetes 兼容性的问题,导致系统性能不稳定或功能异常。为了提高系统的稳定性和兼容性,建议升级到更高版本的内核,例如 …...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架
1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...
Git 命令全流程总结
以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结,按操作场景分类整理: 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...
python学习day39
图像数据与显存 知识点回顾 1.图像数据的格式:灰度和彩色数据 2.模型的定义 3.显存占用的4种地方 a.模型参数梯度参数 b.优化器参数 c.数据批量所占显存 d.神经元输出中间状态 4.batchisize和训练的关系 import torch import torchvision import torch.nn as nn imp…...
Linux 中替换文件中的某个字符串
如果你想在 Linux 中替换文件中的某个字符串,可以使用以下命令: 1. 基本替换(sed 命令) sed -i s/原字符串/新字符串/g 文件名示例:将 file.txt 中所有的 old_text 替换成 new_text sed -i s/old_text/new_text/g fi…...
CCF 开源发展委员会 “开源高校行“ 暨红山开源 + OpenAtom openKylin 高校行活动在西安四所高校成功举办
点击蓝字 关注我们 CCF Opensource Development Committee CCF开源高校行 暨红山开源 openKylin 高校行 西安站 5 月 26 日至 28 日,CCF 开源发展委员会 "开源高校行" 暨红山开源 OpenAtom openKylin 高校行活动在西安四所高校(西安交通大学…...
