ReactNative入门

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

ReactNative入门_第4张图片

创建组件

ReactNative入门_第5张图片
ReactNative入门_第6张图片

构造器

ReactNative入门_第7张图片

组件三大核心属性

state

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

props

ReactNative入门_第9张图片

函数式使用props
ReactNative入门_第10张图片

refs

代替id方便获取相应控件的值
ReactNative入门_第11张图片

回调形式:
ReactNative入门_第12张图片
回调函数定义成class的绑定函数:
ReactNative入门_第13张图片
React.createRef() 该方法只能一对一 最推荐的方式:
ReactNative入门_第14张图片

旧的组件的生命周期

ReactNative入门_第15张图片

ReactNative入门_第16张图片
ReactNative入门_第17张图片

新的组件生命周期

ReactNative入门_第18张图片
ReactNative入门_第19张图片
生命周期流程图
ReactNative入门_第20张图片
新加入的生命周期方法都不常用

getDerivedStateFromProps()
ReactNative入门_第21张图片
getSnapshotBeforeUpdate()
ReactNative入门_第22张图片
总结:
ReactNative入门_第23张图片
不要用Index索引值作为key
ReactNative入门_第24张图片
ReactNative入门_第25张图片

连续解构赋值+重命名

ReactNative入门_第26张图片
fetch进行网络请求数据
ReactNative入门_第27张图片

SetState()

ReactNative入门_第28张图片
一:只使用一个参数:
ReactNative入门_第29张图片
增加回调函数 回调函数在更新状态后触发
ReactNative入门_第30张图片
二:函数式 可以获取到state与props
ReactNative入门_第31张图片

Hook

ReactNative入门_第32张图片
ReactNative入门_第33张图片
ReactNative入门_第34张图片

你可能感兴趣的:(react,native,javascript,react.js)