React Native 组件状态 state

总所周知,React 组件的数据由 propsstate 两大部分组成。

propsstate 之间的共同点就是它们都是一个对象或者说一个字典 {}

它们之间也有着显著的区别。

  • state 由 React 组件自己内部管理,是可变的。组件可以随时更新 state 的数据,组件外部则无法访问和更新。

  • props 是 React 组件的属性,是组件外部传递给组件的数据。对于组件来说,这些数据是不可变的。组件只能读取不能更改。只能由调用组件的外部代码来更改。

    props 一般情况下由组件自描述,也就是组件描述自己能够接受哪些数据。但外部可以无视,可以传递比组件自描述更多的数据。至于组件自己用不用,那是组件自己的问题,外部组件无权干涩。

本章节我们简单介绍下 stateprops 会在 React Native 组件属性 props 中介绍。

React Native 组件状态 state

组件状态 state 是一个 JavaScript 对象或字典 {}

初始化 state

在 ES6 时代,组件状态就是组件内部的一个变量。

初始化的方式有两种:

  1. 类的实例属性

    class App extends React.Component {
        state = {
            name: '老陈打码',
            site: 'www.cpengx.cn'
        }
    }
    
  2. 在类的构造函数中初始化

    class App extends React.Component {
    
        constructor()
        {
            super()
            this.state = {
                name: '简单教程',
                site: 'https://www.twle.cn'
            }
        }
    }
    

使用 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://www.twle.cn'
    }

    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
   },
})

运行效果如下

React Native 组件状态 state

更新 state

React 提供了 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://www.twle.cn'
    }

    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
   },
})

运行

Q.E.D.


悟已往之不谏,知来者之可追

江子辰,读书人,爱文学,软件工程理工男,IP浙江在职,从业五年。主攻前端方向技术研发,副攻Unity 3D、IOS客户端、Python人工智能等。2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等,都是虚名。

新网站链接:https://jiangsihan.cn/frontend