Question

考虑以下React Native代码：

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

export default class Target extends React.Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true};
        this.hitData = this.props.hitData;
    }

    componentDidMount(){
        for(let i of Object.keys(this.hitData)){
            if(this.hitData[i] === 0){
                this.hitData[i] = '---'
            }
        }
        this.setState({
            prop1: this.hitData['prop1'],
            prop2: this.hitData['prop2'],
            prop3: this.hitData['prop3'],
            prop4: this.hitData['prop4'],
            prop5: this.hitData['prop5'],
            isLoading: false
        });
        this.onPress = this.onPress.bind(this);

    }


    componentDidUpdate(prevProps) {

       // console.log(prevProps)
       if(this.props.hitData !== prevProps.hitData){
           console.log("Component "+  this.state.mac + " got new props!");
           this.hitData = this.props.hitData;

           this.setState((state, props) =>{
               let newState = {};
               for(let i of Object.keys(props.hitData))
               {
                   if(state[i] !== props.hitData[i])
                   {
                       console.log(i + " is different!");
                       newState[i] = props.hitData[i]
                   }
               }
               return newState
           });
       }
    }


    onPress(txt) {
        console.log(txt);
    }




    render(){
        return(
            <View style={styles.container}>
                <View style={{flex: 1, flexDirection: 'row'}}>
                    <View style={{borderWidth: 2.5, borderColor: '#00FF00',width: '50%'}}>
                        <Text style={{fontSize: 19, fontWeight: 'bold'}}>{this.state.prop1}</Text>
                        <Text style={{fontSize: 16}} numberOfLines={1}>{this.state.prop2}</Text>
                    </View>
                    <View>
                        <Text>{"Prop3: " + this.state.prop3}</Text>
                        <Text>{"Prop4: " + this.state.prop4}</Text>
                        <Text>{"Prop5: " + this.state.prop4}</Text>
                    </View>
                </View>

                <Button key={this.hitData[0]} title={"BUTTON"} onPress={() => this.onPress(this.hitData[0])}/>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        borderRadius: 4,
        borderWidth: 2.5,
        height: 100,
        marginBottom: 5,
        overflow: 'hidden'
    }
});

这是React Native组件的代码。该组件在父元素中接收从EventSource接收的信息。目的是根据未来事件的数据来更新包含Prop[3-5]的字段。

在父组件中，我在state上的每个项目都有一个属性，并且正在定义每个元素，例如： const targetList = this.state.filterKeys.map((item) => <Target key={item} hitData={this.state[item]['lastHit']}/>

然后在我的事件处理程序中可以执行以下操作：

this.setState({ [id]: hitIntermediate })

向每个子组件发送新道具。

在子组件中，我确实看到了新的道具，但是在第一次更新后，子项停止更新。我发送了多少个事件都没有关系，在收到第一个更新之后，不再显示任何更新。

奇怪的是，如果我在子组件中查询this.state，我确实看到状态反映了来自新事件的数据，但是显示没有变化。

我完全误解了这里的内容。本质上，我想做的就是在包含各种数据的.innerHTML标签上设置<Text>，但是我的所有更新似乎都在第一次之后就被忽略了。

Answer 1

我能够自己解决此问题。

事实证明，我将事件添加到组件中的方式很愚蠢。我进行了更改，而不是在主要组件中维护一个非常复杂的状态，而是如何传入EventSource并在每个子组件中定义一个事件处理程序。

现在，我正在实时查看更新。我仍然想稍微提高重新渲染性能，但总体而言，我遇到的问题已解决。

现在有一个快速的奖励问题：如果我运行react-devtools，为什么我似乎看到（略）更快的性能？

React Component仅更新一次

1 个答案: