反应本机变量与状态

Question

我正在尝试创建一个动态更新的简单加法应用程序。 我想我成功了，但我仍在尝试了解状态。 为什么要求text为状态，但result却不是，即使它始终在更新？

import React from 'react';
import { StyleSheet, TextInput, StatusBar, Text, View } from 'react-native';
import Constants from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {text1: null, text2: null};
  }


  render() {
    var result = parseInt(this.state.text1) + parseInt(this.state.text2);
    return (
      <View style={styles.container}>
        <TextInput
        keyboardType="numeric"
        style={{height: 40}}
        placeholder="First"
        onChangeText={(text1) => this.setState({text1})}
        />
        <TextInput
        keyboardType="numeric"
        style={{height: 40}}
        placeholder="Second"
        onChangeText={(text2) => this.setState({text2})}
        />
        <Text>{this.state.text1&&this.state.text2 ? result : "Result will appear here."}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

Answer 1

在上面的示例中，您的输入与组件状态相关联-而结果是从该状态导出的。

如果您也想在状态中存储“结果”，从技术上讲您可以，但是您将自己设置为另外1个可能出错的地方。 见下文：

import React from 'react';
import { StyleSheet, TextInput, StatusBar, Text, View } from 'react-native';
import Constants from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {text1: null, text2: null, result: null};
  }


  render() {
    return (
      <View style={styles.container}>
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="First"
          onChangeText={(text1) => this.setState(state => ({
            text1,
            result: parseInt(text1) + parseInt(state.text2)
          }))}
        />
        <TextInput
          keyboardType="numeric"
          style={{height: 40}}
          placeholder="Second"
          onChangeText={(text2) => this.setState(state => ({
            text2,
            result: parseInt(text2) + parseInt(state.text1)
          }))}
        />
        <Text>{this.state.result || "Result will appear here."</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

希望有道理！ 您最初的操作方式是一种更好的操作方式！

Answer 2

React组件旨在根据状态或属性更改进行刷新。 默认情况下，并且当您尚未在shouldComponentUpdate定义自己的限制时，所有State或Props更改都将触发组件重新渲染。

重新渲染意味着组件将执行其render方法。 DOM是否更新由虚拟差异引擎处理。

因此，通过响应onChangeText调用setState可以告诉组件要进行状态更改。 结果，创建了新的状态版本，并触发了组件更新，从而调用了render方法。 然后是您的render方法，它为新状态状态中的文本更改构造result值。

最后，回答您的问题。

为了触发组件更新，必须将text1和text2值作为状态的一部分。 同样，作为存储在渲染之间保留这些值。

result的值是从状态派生的，即从状态值解析后并置。 result的值永远不会存储在任何地方，而是在呈现组件时按需生成。