Question

我试图在实践中了解在道具为对象的情况下，shallow道具比较在React.PureComponent中如何工作。我已经阅读了两种解释：

只有新道具是否指向同一个对象这一事实，即检查参考保持不变。
比较对象的属性。

在任何情况下，我的示例都应符合以下两种解释。但是，由于某些原因，我的组件仍会重新渲染。

这就是我所拥有的。

Parent.js

import React from 'react'
import {getItems} from '../utils/data'
import Child from './Child'
import Filter from './Filter'

class Parent extends React.Component {

  state = {
    filter: undefined,
    items: []
  }

  handleFilterChange = filter => {
    this.setState(
      {filter},
      () => getItems(filter, items => this.setState({items})
    )
  }

  render() {
    return (
      <div>
        <Filter filter={this.state.filter} onFilterChange={this.handleFilterChange} />
        <Child items={this.state.items} />
      </div> 
    )
  }
}

Child.js

class Child extends React.PureComponent {
  render() {
    return (
      console.log('RENDER')
      ...
    )
  }
}

更改filter时，它将两次触发render组件的Parent方法：

使用新的Parent更新filter的状态时。
获取新的items并更新Parent的状态时。

现在，因为我的Child是PureComponent，所以我希望它只能在第二次而不是第一次被重新渲染。但实际上，这两次都重新呈现。

items是一个对象数组，例如：

[
  {title: 'aaa', index: 0, group: 'filter1'},
  {title: 'bbb', index: 1, group: 'filter2'}
]

因此，如果仅更新PureComponent，我希望filter不会呈现，因为：

items是在Parent组件状态下存储的同一数组；
items数组的内容不变，即对象完全相同。

为什么我的Child组件然后渲染两次？

反应PureComponent（意外）行为

0 个答案: