[React Native] React 中的状态（State）

目录

• 1.state 属性
  • 1.1 state属性的介绍
  • 1.2 state 的使用
• 2.setState() 方法
  • 2.1 第一个参数：updater 函数
  • 2.2 第二个参数：callback
• 3.正确操作 state
  • 3.1 不要使用 this.state 来直接修改 state
  • 3.2 状态更新可能是异步的
  • 3.3 状态更新是一个合并的过程
• 4.单向数据流
• 5.完整示例代码

state 属性是 React 组件用来更新数据的核心特性，也是我们平时见得最多的属性之一，那么你对 state 又了解多少呢？

1. state 属性

1.1 state属性的介绍

我们使用两种数据来控制一个组件：props 和 state。props 是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用 state。

state 属性主要用来存储组件自身需要的数据，是组件自己私有的，我们一般通过修改 state 属性的值来更新数据，React 内部会监听 state 的变化，一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构。

state 应该是一个 JavaScript 对象。

1.2 state 的使用

一般来说，你需要在 constructor() 方法中初始化 state（这是ES6的写法，ES5 中一般在 getInitialState() 方法中来初始化 state），然后在需要修改时调用 setState() 方法。

不要使用 this.state 来修改 state 属性值，应该调用 setState() 方法，this.state 是不可变的。

2. setState() 方法

setState() 的完整表达式

setState(updater, [callback])

setState() 方法会把对组件 state 的改变加入到队列中，并且告诉 React 这个组件及其子组件需要重新渲染。

2.1 第一个参数：updater 函数

setState(updater, callback) 方法的第一个参数是一个固定格式的 updater 函数：

(prevState, props) => stateChange

prevState 是一个对之前状态（previous state）的引用，我们是不能直接修改这个参数的值，要想修改 state 的值，我们应该根据 prevState 和 props 参数来创建一个新的 JavaScript 对象。
例如：

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

你也可以传一个对象而不是函数，来作为setState(updater, callback) 方法的第一个参数，React 会将该参数 merge 到 state 中。
例如：

this.setState({quantity: 2});

2.2 第二个参数：callback

setState(updater, callback) 方法的第二个参数 callback 是一个可选参数。

为了更好的性能表现，React 并不能保证 setState() 一被调用 state 就能更新。所以，如果在调用 setState() 之后，马上就读取 this.state 的值的话，可能会出现误差。
因此，这种情况下，推荐使用 componentDidUpdate 或者 setState(updater, callback) 方法的 callback 来获取最新的状态。React 官方更推荐使用 componentDidUpdate()，而不是 callback 来监听 update 事件（注： 除非 shouldComponentUpdate() 方法返回 false，setState() 将永远都会引发重新渲染）。

3. 正确操作 state

3.1 不要使用 this.state 来直接修改 state

记住，this.state 是不可变的。

不要使用 this.state 来修改 state 属性值：

// Wrong
this.state.comment = 'Hello';

应该调用 setState() 方法：

// Correct
this.setState({comment: 'Hello'});

3.2 状态更新可能是异步的

考虑到性能问题，如果在同一个周期内，调用了多次，React 可能会将多个 setState() 方法的调用批量合成一次更新。比如，你在一个周期内，对一个数值进行多次累加，就会出现类似于下面的这种情况：

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

这也就意味着，后面的调用会覆盖掉上一次调用后的修改的 state 值，因此 quantity 只累加了 1 次。

考虑到 this.props 和this.state 可能是异步更新的，所以，每次调用 setState() 方法时，最好不要依赖于 this.props 和this.state 来计算最新的 state。

总之，如果后面的状态依赖于之前的状态，建议使用 updater 函数：

// Correct
this.setState((prevState, props) => {
  return {quantity: prevState.quantity + 1};
});

上面用的是 箭头函数 的形式，其实用普通的函数也是一样的效果：

// Correct
this.setState(function(prevState, props) {
  return {
    quantity: prevState.quantity + 1;
  };
});

3.3 状态更新是一个合并的过程

当你调用 setState() 方法时，React 会将将你当前所提供的对象合并到当前的状态中。
例如：

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

componentDidMount() {

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

在上面👆的例子中， state 的更新只是替换了 comments，posts是不会受到任何影响的。

4.单向数据流

父组件和子组件之间不能通过 state 来交互，父组件只能将自己的 state 值传给子组件的 props。这种数据传递的方式通常被称为 “自顶向下（top-down）”或者“单向（unidirectional）”数据流。

任何 state 都是由一个特定的组件所拥有的，任何由 state 驱动的数据或者 UI 只会影响到该组件的子组件。

如果你将组件树想象成一个 props 瀑布，那么每个组件的状态就像是那个组件水源上的附属品，但是也是向下流动的。

5. 完整示例代码

'use strict';

import React, { Component, } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';


export default class StateDemo extends Component {
  render() {
    return <Container style={styles.container} />;
  }
}


class Container extends Component {
  constructor() {
    super();
    // 设置初始状态
    this.state = {
      showText: true,
    };
  }

  render() {
      // 根据状态决定展示什么文字
      var text = (this.state.showText == true) ? 'Hello' : "";
      var buttonTitle = (this.state.showText == true) ? 'Hide' : "Show";

      return (
        <View style={styles.container}>
          <Text style={styles.text}>{text}</Text>
          <TouchableOpacity
            onPress = {() => {
             // 更新状态
              this.setState(
                previousState => {
                  return { showText: !previousState.showText };
                }
              );

            }}>
            <Text style={styles.buttonTitle}>{buttonTitle}</Text>
          </TouchableOpacity>
        </View>
  );
  }
}

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: 'yellow',
     alignItems: 'center',
   },

   text: {
     marginTop: 200,
     fontSize: 30,
     textAlign: 'center',
   },

   buttonTitle: {
     width: 70,
     marginTop: 10,
     fontSize: 20,
     textAlign: 'center',
     backgroundColor: 'green',
   },

 });

延伸阅读

• React API Reference: React.Component
• React API Reference: State and Lifecycle
• React Native 官方文档：State
• 《React Native 入门与实战》