跳至主要內容

ReactNative State(状态)

Oragekk...大约 3 分钟前端跨平台前端React Native

接上篇 ReactNative开发环境配置,ES6语法介绍

ReactNative State(状态)

概念

通俗来讲,一个组件,或者一个视图,他们都是 Component,Component 用两个最重要的东西,一个props

一个state

我们使用两种数据来控制一个组件:propsstateprops是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。(props就像一个类的初始化属性一样,只有在创建时可以赋值,并且组件内部不可修改,也就是readonly)

对于需要改变的数据,我们需要使用state。也可以把state理解为一个状态机,对于那些需要改变的数据可以使用state来更改,比如网络接口拿回来的数据,可以放在state里,当需要改变的时候只需要调用setState即可

使用

一般来说,你需要在 class 中声明一个state对象,然后在需要修改时调用setState方法。

假如我们有一个弹窗,想要控制弹窗是不是显示,需要一个modalVisible属性,当更改它的值时从而使界面 UI 产生相应的变化

// 声明state对象
interface IState {
  modalVisible: boolean;
}

export default class ModalMenu extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = { modalVisible: false };
  }
}

另一种声明方式,声明在类内部,声明的同时,进行初始化

state = {
  modalVisible: false,
};

使用this.state.modalVisible来控制组件是否显示

render() {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this.setModalVisible(false)
                }}
            >

        );
}

更新组件状态使用

this.setState({ modalVisible: true });

注意点

实际开发中,我们一般不会在定时器函数(setInterval、setTimeout 等)中来操作 state。典型的场景是在接收到服务器返回的新数据,或者在用户输入数据之后。你也可以使用一些“状态容器”比如Reduxopen in new window来统一管理数据流。

每次调用setState时,BlinkApp 都会重新执行 render 方法重新渲染。

  • render()中 UI 的变化只有当绑定的 state 中的某个属性变化后,才会变化
  • 一切界面变化都是状态state变化
  • state的修改必须通过setState()方法
    • this.state.likes = 100; // 这样的直接赋值修改无效!
    • setState 是一个 merge 合并操作,只修改指定属性,不影响其他属性
    • setState 是异步操作,修改不会马上生效

我们可以看到setState内部的声明

setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

如果想要同步使用,我们可以使用第二个参数 callback?它是可选的

this.setState({ modalVisible: true }, () => {
  // 这里是同步的
});

参考资料:

官方文档open in new window

ES6 延展操作符(...)open in new window

typeScriptg 中文文档open in new window

ReactNative 入门与进阶open in new window

https://docs.nativebase.io

你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.2