前端江太公
React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库,因此会有更丰富的 UI 体验效果,同时也能够很好地调用底层框架的UI使用。
React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-ReactNative目录结构 04-ReactNative视图View 05-ReactNative组件样式style 06-ReactNative文本组件Text 07-ReactNative组件状态state 08-ReactNative组件属性props 09-ReactNative输入组件TextInput 10-ReactNative图片组件Image 11-ReactNative活动指示器组件 12-ReactNative弹出框Alert 13-ReactNative存储数据组件AsyncStorage 14-ReactNative动画组件Animated 15-ReactNative开关组件Switch 16-状态栏组件StatusBar 17-ReactNative滚动视图ScrollView 18-ReactNative选择器Picker 19-ReactNative网络请求
React Native 组件状态 state总所周知,React 组件的数据由 props 和 state 两大部分组成。
props 和 state 之间的共同点就是它们都是一个对象或者说一个字典 {}。
它们之间也有着显著的区别。
state 由 React 组件自己内部管理,是可变的。组件可以随时更新 state 的数据,组件外部则无法访问和更新。
props 是 React 组件的属性,是组件外部传递给组件的数据。对于组件来说,这些数据是不可变的。组件只能读取不能更改。只能由调用组件的外部代码来更改。
props 一般情况下由组件自描述,也就是组件描述自己能够接受哪些数据。但外部可以无视,可以传递比组件自描述更多的数据。至于组件自己用不用,那是组件自己的问题,外部组件无权干涩。
本章节我们简单介绍下 state ,props 会在 React Native 组件属性 props 中介绍。
React Native 组件状态 state组件状态 state 是一个 JavaScript 对象或字典 {}。
初始化 state在 ES6 时代,组件状态就是组件内部的一个变量。
初始化的方式有两种:
类的实例属性
class App extends React.Component { state = { name: '老陈打码', site: '·' } }在类的构造函数中初始化
class App extends React.Component { constructor() { super() this.state = { name: '简单教程', site: 'https://·' } } } 使用 state因为 state 是一个对象或者字典,因此读取 state 的值其实就是访问对象的属性。可以通过对象属性语法来访问 state 的值。
例如通过 this.state.name 访问名称,通过 this.state.site 访问站点网址。
但 React 中一般通过对象解析语法来访问 state,也就是通过下面的方式来获取 state 的值
const {name,site} = this.state这样能保证我们读取的状态值是 不可变的。
例如
import React, { Component } from 'react' import { Text, View, StyleSheet} from 'react-native' export default class App extends React.Component { state = { name: '简单教程', site: 'https://·' } render() { const {name,site} = this.state return ( <View style={styles.container}> <Text>站点名称:{name}</Text> <Text>站点网址:{site}</Text> </View> ) } } const styles = StyleSheet.create ({ container: { margin:10 }, })运行效果如下
更新 stateReact 提供了 this.setState({key:value}) 函数来更新状态 state。
setState() 函数的参数是一个对象或哈希表/字典,是要更新的键值对。
例如要把站点名称改成 简单教程,简单编程,则可以如下使用 setState()
this.setState({name:'简单教程,简单编程'})例如
import React, { Component } from 'react' import { Text, View, StyleSheet} from 'react-native' export default class App extends React.Component { state = { name: '简单教程', site: 'https://·' } updateState = () => { const name = this.state.name == '简单教程' ? '简单教程,简单编程' : '简单教程' this.setState({name:name}) } render() { const {name,site} = this.state return ( <View style={styles.container}> <Text onPress={this.updateState}>站点名称:{name}</Text> <Text>站点网址:{site}</Text> </View> ) } } const styles = StyleSheet.create ({ container: { margin:10 }, })运行
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |