React-native变量vs状态

时间:2018-02-11 10:27:41

标签: javascript reactjs react-native jsx

我正在尝试创建一个动态更新的简单添加应用。我想我成功了,但我仍在努力了解各州。为什么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'
  },
});

2 个答案:

答案 0 :(得分: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'
  },
});

希望有道理!你最初这样做是一种更好的方法!

答案 1 :(得分:1)

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

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

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

最后,回答你的问题。

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

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