React Native的state

前言

在React的世界里,界面是由一个个Component拼出来的。当我们需要渲染一个界面时,以<View>为父控件。<Text>或自定义的<CustomText>为子控件。我们通过重写Compenent的render方法,来实现控件的渲染。

那么,Compenent的render方法何时调用呢?

  1. AppRegistry.registerComponent调用时,会调用render方法。
  2. 就是state变化时,会调用render方法。

因此,当我们数据改变,需要重新调用render时,我们应该将数据存入state中,这时控件会调用render方法,此时,我们再从state中取出最新的数据,重新渲染界面。

一个例子

需求

创建一个会时隐时现的<Text>,显示半秒,再隐藏半秒。

实现

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';


class BlinkText extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每500毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 500);
  }

    render() {
      // 根据当前showText的值决定是否显示text内容
      let display = this.state.showText ? this.props.text : ' ';
      return (
        <Text>{display}</Text>
    );
  }
}

export default BlinkText;

我们先看BlinkText的constructor方法,这个类似类的构造方法。我们在构建方法中,创建了一个定时方法,定时方法中对previousState.showText的状态进行了取反,时间为500ms。

然后在render方法中,先判断previousState.showText状态。为true时,显示从外界传入的props的值,如果状态为false,则不显示。

最终,我们就可以看到一个闪动的<Text>。

一些思考

state的机制,提供了一个很方便的更新UI的方法。但它同时也带来了一个问题。

组件应该尽量无状态化。一个有状态的组件是难以维护的。在运行中,如果每个组件都有状态变化,那父组件的更新与子组件的更新会产生冲突。从而导致,组件的状态变得难以琢磨。

因此,常用的作法是,常用的模式就是创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props传给子级.有状态的组件封装了所有的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据。

如有问题,欢迎指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

打造炫酷的通知插件EasyToaster

引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

3779
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能

    myPage分页控件发出来之后,虽然开源了,但是没有给一个简单一点的 demo,真是漏掉了一个很重要的部分。     先说明一下使用myPage分页...

24010
来自专栏微信小程序开发

说说小程序中textarea的坑

有很多用户都给我家小程序客服反馈,说是页面无法输入内容,集中在微信6.6.7版本,之前的微信版本都正常。

2.8K3
来自专栏枕边书

JavaScript Alert 函数执行顺序问题

问题 ---- 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求...

3184
来自专栏河湾欢儿的专栏

Vue-router(路由)

2.定义(注册)路由跳转的组件----使用全局扩展的方式,用其他创建组件的方式也可以 在这里,进行了一个赋值操作,用一个变量名保存组件中所有的内容

1412
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

1611
来自专栏TungHsu

怎么快速将PPT转为Word文档?

想必大家都有打印PPT的经历,一般大家的方法是缩小PPT页然后打印,今天教大家一个新方法,将快速将PPT转为Word文档。

843
来自专栏西二旗一哥

iOS - Add apple document

1113
来自专栏nummy

chrome的debug工具Profiles使用方法

本文介绍下chrome的debug工具Profiles,很多人应该没用过,甚至不知道。

852
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

参考网址: 《HTML中form表单作用解释》 表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成: 表单标签:这里面包含了处理表...

3797

扫码关注云+社区

领取腾讯云代金券