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 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

Vue-router(路由)

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

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

说说小程序中textarea的坑

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

1.3K3
来自专栏程序员的诗和远方

tips-解决base标签造成SVG效果失效

之前写了使用SVG实现一个骚气的圆环: 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来,原来是html base标签和内联SVG同时使用...

2935
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

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

2857
来自专栏CRPER折腾记

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

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

1331
来自专栏枕边书

JavaScript Alert 函数执行顺序问题

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

2914
来自专栏TungHsu

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

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

783
来自专栏我的博客

安卓开发之事件

事件处理:提供为用户动作响应的机制 Android提供两种方式的事件处理 一、基于回调的事件处理 二、基于监听的事件处理 事件监听处理模型中三类对象: 事件源:...

2065
来自专栏禅林阆苑

Vue2.5源码阅读笔记01—代码结构与初始化

Vue作为当下最流行的渐进式的js框架,其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习,其中运用的代码组织的技巧,...

70359
来自专栏nummy

chrome的debug工具Profiles使用方法

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

712

扫码关注云+社区