React-native学习-22 - state使用

  • Z时代
  • 2024-01-10
  • 分类：综合

react

最近看代码发现，这个状态state定义的位置不是很明确，有时在constructor里，有时在constructor外。

特意查了一下。下面是转来的。

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

        一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

state的初始化与使用:
 

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
 
export default class StateComponent extends Component {
    /**
     * 方式1
     * @type {{size: number}}
     */
    state = {
        size: 40,
    }
 
    constructor(props) {
        super(props);
        /**
         * 方式2
         */
        /*this.state = {
            size: 90,
        }*/
    }
 
    render() {
        return <Text>StateComponent_{this.state.size}</Text>;
    }
}

改变state的值,通过setState的方式

实例:动态缩放图片
import React, {Component} from 'react';
import {Image, Platform, StyleSheet, Text, View} from 'react-native';
 
export default class StateComponent extends Component {
    /**
     * 方式1
     * @type {{size: number}}
     */
    state = {
        size: 100,
    }
 
    constructor(props) {
        super(props);
        /**
         * 方式2
         */
        /*this.state = {
            size: 90,
        }*/
    }
 
    render() {
        return <View>
            <Text>StateComponent_{this.state.size}</Text>
            <Image source={require("./src/pic/dog.jpg")}
                   style={{width: this.state.size, height: this.state.size}}/>
            <Text onPress={() => {
                this.setState({
                    size: this.state.size + 10,
                });
            }
            }>放大图片</Text>
            <Text onPress={() => {
                this.setState({
                    size: this.state.size - 10,
                })
            }}>缩小图片</Text>
        </View>;
    }
}

以上是 React-native学习-22 - state使用 的全部内容， 来源链接： utcz.com/z/382761.html

回到顶部