React Native：重新渲染组件，但道具没有改变

Question

我遇到了一个奇怪的问题，可以弄清楚为什么要打apping。

这应该不会发生，因为传递给“ History组件的道具尚未更新。

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

当道具或状态之一发生更改时，组件将重新渲染，请尝试使用PureComponent或实现shouldComponentUpdate()并处理决定何时重新渲染。

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

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