ReactNative 认知(三)

ReactNative State(状态)

Posted by oragekk on November 12, 2019

接上篇 ReactNative 认知(二)

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。典型的场景是在接收到服务器返回的新数据,或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流。

每次调用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 },()=>{
            // 这里是同步的
});

参考资料:

官方文档

ES6 延展操作符(…)

typeScriptg中文文档

ReactNative入门与进阶

https://docs.nativebase.io