React 组件只更新一次

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，我确实看到状态反映了来自新事件的数据，但显示没有改变。

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

Answer 1

我能够自己解决这个问题。

事实证明，我将事件放入组件的方式很愚蠢。 我改变了它，而不是在主组件中维护一个非常复杂的状态，我只是传入 EventSource 并在每个子组件中定义一个事件处理程序。

现在我可以看到接近实时的更新。我仍然想稍微提高重新渲染性能，但总的来说我遇到的问题已经解决了。

现在有个小问题：如果我运行 react-devtools，为什么我似乎看到（稍微）更快的性能？