Javascript 反应本机：组件重新加载，但道具未更改

我遇到了一个奇怪的问题，我能弄明白为什么会发生这种事

这不应该发生，因为传递给

历史记录的道具尚未更新

./components/History.js

当其中一个道具或状态更改时，组件将重新渲染，请尝试使用
PureComponent
或实现
shouldComponentUpdate（）
并确定何时重新渲染

请记住，
PureComponent
进行浅层对象比较，这意味着，如果您的道具具有嵌套对象结构。它不会像预期的那样工作。因此，如果嵌套属性发生更改，组件将重新渲染

在这种情况下，您可以使用一个普通的
组件
并实现
shouldComponentUpdate（）
，在该组件中，您可以通过比较嵌套属性的更改来判断React to re render（重新渲染）。
当其中一个道具或状态更改时，该组件将重新渲染，尝试使用
PureComponent
或实现
shouldComponentUpdate（）
谢谢您的回答。但它应该只更新差异吗？非常感谢。我使用无状态组件时（错误地）假设它将充当PureComponent。
...
const History = ({ previousLevels }) => {
  return (
    <ScrollView style={styles.container}>
      {previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
        return (
          <CardKBT
            key={date}
            date={date}
            stressValue={stressValue}
            tirednessValue={tirednessValue}
          />
        )
      })}
    </ScrollView>
  )
}
...
export default History

import React from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { AppLoading, Font } from 'expo'
import Store from 'react-native-simple-store'
import { debounce } from 'lodash'

import CurrentLevels from './components/CurrentLevels'
import History from './components/History'

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isLoadingComplete: false,
      currentLevels: {
        stressValue: 1,
        tirednessValue: 1,
      },
      previousLevels: [],
    }

    this.debounceUpdateStressValue = debounce(this.onChangeStressValue, 50)
    this.debounceUpdateTirednessValue = debounce(
      this.onChangeTirednessValue,
      50
    )
  }

  async componentDidMount() {
    const previousLevels = await Store.get('previousLevels')
    if (previousLevels) {
      this.setState({ previousLevels })
    }
  }

  render() {
    const { stressValue, tirednessValue } = this.state.currentLevels

    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          ...
        />
      )
    } else {
      return (
        <View style={{ flex: 1 }}>
          <CurrentLevels
            stressValue={stressValue}
            onChangeStressValue={this.debounceUpdateStressValue}
            tirednessValue={tirednessValue}
            onChangeTirednessValue={this.debounceUpdateTirednessValue}
            onSave={this.onSave}
          />
          <History previousLevels={this.state.previousLevels} />
        </View>
      )
    }
  }

...

  onChangeStressValue = stressValue => {
    const { tirednessValue } = this.state.currentLevels
    this.setState({ currentLevels: { stressValue, tirednessValue } })
  }

  onChangeTirednessValue = tirednessValue => {
    const { stressValue } = this.state.currentLevels
    this.setState({ currentLevels: { stressValue, tirednessValue } })
  }

  onSave = () => {
    Store.push('previousLevels', {
      date: `${new Date()}`,
      ...this.state.currentLevels,
    }).then(() => {
      Store.get('previousLevels').then(previousLevels => {
        this.setState({
          currentLevels: { stressValue: 1, tirednessValue: 1 },
          previousLevels,
        })
      })
    })
  }
}