Question

我是新的反应本机开发。我有3个组件。最初加载第一个组件。从1个组件推送到2个组件，再次从2个组件推送到3个组件。如果3个组件我正在进行一些更改同时我想要刷新1＆amp; 2组件。当我点击后退按钮没有刷新。我怎么刷新它？

1 component ==> 2 component ==> 3 component (if login is success how can i refresh back component method)

Answer 1

React的基本思想是向下数据流。状态应保存在父组件中，并向下流向子组件。如果要从子组件更改状态，则需要将状态提升回父组件。

这里重要的一个概念是组件类型之间的区别：智能与哑，或者表示与容器。基本上，智能/容器组件保持状态和逻辑，其中哑/表示组件仅呈现UI。这是一篇很棒的文章：

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

此外，在React和React-Native中，组件不会完全刷新。有一个名为diffing的进程，其中获取前一个DOM树的快照，并将其与具有下一个状态props的DOM树进行比较，并且仅渲染更改。因此，您所要做的就是更改父/智能/容器组件中的状态，React将通过差异来处理重新渲染。

所以，这样的事情就可以解决问题：

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

export default class Parent extends Component {
    state = { isLoggedIn: false, otherState: '' }

    _handleLogin = () => {
        //do login stuff
        this.setState({ isLoggedIn: true });
    }

    render() {
        return (
          <View style={styles.container}>
            <ChildOne handleLogin={this._handleLogin} {...this.state} />
            {this.state.isLoggedIn &&
              <Text>Now logged in!</Text>
            }
          </View>
        )
    }

}

const ChildOne = props => (
    <View>
        <Grandchild {...props} />
    </View>
);

const Grandchild = props => (
    <Button 
        onPress={() => props.handleLogin()}
        title="some title"
    />
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  }
});

这是一个小吃，你可以在你的设备上看到它： https://snack.expo.io/SkhOTvkVb

Answer 2

您可以使用props

将数据传递到另一个组件

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

export default class ComponentOne extends Component {
    render(){
        return(
            <ComponentTwo
                text="Hello"
            />
        )
    }
}

class ComponentTwo extends Component {
    render(){
        return(
            <ComponentThree
                textTwo={this.props.text}
            />
        )
    }
}


class ComponentThree extends Component {
    render(){
        return(
            <View><Text>{this.props.textTwo}</Text></View>
        )
    }
}

有关详细信息，请参阅此链接http://facebook.github.io/react-native/releases/0.45/docs/props.html#props

一对多组件之间的通信本机反应

2 个答案: