React-Native setState的若干使用方法速记

最新推荐文章于 2021-09-24 15:24:31 发布

隔壁老何

最新推荐文章于 2021-09-24 15:24:31 发布

阅读量422

点赞数

分类专栏： React-Native 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/weixin_42405831/article/details/116244092

版权

React-Native 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

本文探讨了React-Native组件中何时使用state以及如何正确处理setState的异步行为。根据规则，state应仅用于组件内部变化的关键状态，而props是只读的。针对setState的异步问题，提供了两种解决方案：一是通过传递方法更新state，二是利用setState的回调确保状态更新的顺序。示例代码展示了错误和修正后的用法。

摘要由CSDN通过智能技术生成

写作时间：2020年末吧具体时间记不得了
开发平台：windows
React-Native版本：0.63.4
目标平台：Android、iOS

变量什么时候使用state来维护

1、变量如果是通过props从父组件中获取，就不要使用state
2、如果这个变量可以通过其他的状态state或者属性props通过数据处理得到，不要使用state
3、如果变量在render中没有使用到，那就不是一个state
4、变量在整个生命周期中都保持不变时，也不是一个state

总的来说：
State是可变的，是组件内部维护的一组用于反映组件UI变化的状态集合
Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改

如何处理setState异步的问题

下面这段代码希望实现的效果是：当点击按钮，count可以由1变为4，并重新渲染。但最终结果无法达到预期，原因是add方法是从this.state.count中读取数据的，但是React不会更新this.state.count，直到该组件被重新渲染，所以最终每次add读取this.state.count的值都是1，并最终将它设为2

import React from 'react';
import {SafeAreaView, StyleSheet, Text, Button} from 'react-native';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1,
        };
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Text>{this.state.count}</Text>
                <Button title={'button'} onPress={this._onBtnPress} />
            </SafeAreaView>
        );
    }

    _onBtnPress = () => {
        this._add();
        this._add();
        this._add();
    };

    _add = () => {
        this.setState({
            count: this.state.count + 1,
        });
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'cyan',
    },
});

在这里插入图片描述

修改方法如下：

方法1:由传递对象改为传递方法
修改后的add方法如下：

_add = () => {
	this.setState((state) => {
		return {count: state.count + 1};
	});
};

方法2：利用回调，在state修改完成之后再执行
修改后的add方法如下：

_add = () => {
    this.setState(
        {
            count: this.state.count + 1,
        },
        () => {
            this.setState(
                {
                    count: this.state.count + 1,
                },
                () => {
                    this.setState({
                        count: this.state.count + 1,
                    });
                },
            );
        },
    );
};