javascript - react native : Component rerender but props has not changed

Question

我遇到了这个奇怪的问题，我可以弄清楚为什么会发生。

这种情况不应该发生，因为传递给 History 组件的 prop 尚未更新。

./components/History.js

...
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

正如这段代码(如下)所示，History 的属性仅在用户按下“保存”后才会更新。

App.js

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,
        })
      })
    })
  }
}

Answer 1

当其中一个 props 或状态发生变化时，组件将重新渲染，尝试使用 PureComponent 或实现 shouldComponentUpdate() 并处理决定何时重新渲染。

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

在这种情况下，您可以拥有一个普通的 Component 并实现 shouldComponentUpdate() ，您可以在其中告诉 React 根据比较嵌套属性更改来重新渲染。