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

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

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

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组件旨在根据State或Prop更改进行刷新。默认情况下，当您未在shouldComponentUpdate中定义自己的限制时，所有状态或道具更改都将触发组件重新呈现。

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

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

最后，回答你的问题。

text1和text2的值必须是州的一部分，才能触发组件更新。另外，作为商店在渲染之间保留这些值。

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

React-native变量vs状态

2 个答案: