ReactNative入门

React通过虚拟DOM提高性能,jsx允许直接声明组件结构。关键概念包括state和props,用于组件间数据传递。更新state会触发重新渲染。旧的和新的组件生命周期方法各有不同,而Hook是现代React开发中的重要工具。

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

React基本用法:
react与js不同的点在于 react使用的是虚拟DOM js是真实DOM
作用:当有新的数据填充 可以复用之前的,而js需要整体重新渲染
在这里插入图片描述
创建虚拟DOM还可以使用jsx语法直接声明:
在这里插入图片描述
注意要用babel标签将jsx转化为js
但是建议采用jsx直接声明 在对于多标签DOM时js的方法需要不停嵌套非常麻烦
在这里插入图片描述
jsx语法规则
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

创建组件

在这里插入图片描述
在这里插入图片描述

构造器

在这里插入图片描述

组件三大核心属性

state

值是对象 内部可以包含多个key-value
通过更新state属性来更新页面(使用setState()方法修改属性 会重新渲染组件)
类内部的方法要用箭头函数去赋值(为了指定方法内的this指向实例化对象)
在这里插入图片描述

props

函数式使用props
在这里插入图片描述

refs

代替id方便获取相应控件的值
在这里插入图片描述

回调形式:
在这里插入图片描述
回调函数定义成class的绑定函数:
在这里插入图片描述
React.createRef() 该方法只能一对一 最推荐的方式:
在这里插入图片描述

旧的组件的生命周期

在这里插入图片描述
在这里插入图片描述

新的组件生命周期

在这里插入图片描述
在这里插入图片描述
生命周期流程图
在这里插入图片描述
新加入的生命周期方法都不常用

getDerivedStateFromProps()
在这里插入图片描述
getSnapshotBeforeUpdate()
在这里插入图片描述
总结:
在这里插入图片描述
不要用Index索引值作为key
在这里插入图片描述
在这里插入图片描述

连续解构赋值+重命名

在这里插入图片描述
fetch进行网络请求数据
在这里插入图片描述

SetState()

在这里插入图片描述
一:只使用一个参数:
在这里插入图片描述
增加回调函数 回调函数在更新状态后触发
在这里插入图片描述
二:函数式 可以获取到state与props
在这里插入图片描述

Hook

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值