如果连接到未更改的存储，则React componentDidUpdate方法不会在继承的道具更改上激发

Question

我想知道我的组件是否已经加载了一些库。要知道，从任何上下文，我把它连接到我商店的“库”减速器到我的组件。我还从调用组件的父级传递一个配置对象this.props.dataObject。像这样：

class GoogleButton extends Component {
    render() {
        if (this.props.libraries.google) {
            return <a id='sharePost' className='google_icon'></a>
        } else {
            return null
        }
    }

    componentDidUpdate() {
        gapi.interactivepost.render('sharePost', this.props.dataObject)
    }
}

function mapStateToProps(state) {
    return { libraries: state.libraries }
}

export default connect(mapStateToProps)(GoogleButton)

处理库状态的reducer如下所示：

let newState = {...state}
newState[action.libraryName] = action.state
return newState 

当我更改库状态时，componentDidUpdate起作用。问题是当我更改父级继承的道具时this。道具。数据对象。在这种情况下，componentDidUpdate不会触发。如果我从组件中移除connect，它将按要求工作。我错过了什么？

Answer 1

我也有同样的问题，我使用了object。分配用于创建新状态，但我使用combineReducer，它会导致多级状态，在我的情况下，我将整个状态作为道具传递给组件，因此浅层相等性检查无法检测到我的状态更改，所以componentDidUpdate没有调用，在我的情况下，使用combine reducer时，在级别中传递状态更改是很重要的

const MapStateToProps=(state)=>{
    return {
        reportConfig:state.ReportReducer
    }
};

而我的州树是这样的

  {
  ReportReducer: {
    reportConfig: {
      reportDateFilter: 'this week',
      reportType: null,
      reportShopId: null,
      updateShop: true
    }
  }
}

在我的reducer中，以如下方式返回它作为ReportReducer

export default combineReducers({reportConfig});

我的根部减压器是这样的

const rootReducer =combineReducers({ReportReducer});

const store = createStore(rootReducer ,{},enhancer);

Answer 2

我解决了。我不能100%确定这是准确的，但我会解释的。如果我做错了什么，请纠正我。

我一直在想丹在回答中说的肤浅的平等检查。问题就在那里。我从父对象传递了一个对象，该对象的嵌套元素就是更改的元素。对象保持不变。因此，使用connect带来的浅相等检查，组件将永远不会更新。

我的解决方案是在父使用Object.assign（{}，dataObject）当我传递道具时，所以我制作了另一个不同的对象。现在浅平等检查可以比较它，并确定道具已经改变，在更新组件之前。

Answer 3

很可能你的一些道具在组件之外发生了变异
例如，您可能会呈现如下组件：

class Parent extends Component {
  constructor() {
    super()
    this.state = { libraries: {} }
  }

  handleClick() {
    // MUTATION!
    this.state.libraries.google = true

    // Normally this forces to update component anyway,
    // but React Redux will assume you never mutate
    // for performance reasons.

    this.setState({ libraries: this.state.libraries })
  }

  render() {
    return (
      <div onClick={() => this.handleClick()}>
        <GoogleButton libraries={this.state.libraries} />
      </div>
    )
  }
}

由于Redux应用程序处理不可变数据，connect（）对其道具使用浅层相等检查，以避免不必要的重新渲染。然而，如果你在应用程序中使用变异，这将不起作用。

你有两个选择：

这是最好的选择。例如，而不是像

  handleClick() {
    this.state.libraries.google = true
    this.setState({ libraries: this.state.libraries })
  }

你可以写

  handleClick() {
    this.setState({
      libraries: {
        ...this.state.libraries,
        google: true
      }
    })
  }

这样我们就创建了一个新对象，这样connect（）就不会忽略已更改的引用。（我在这段代码中使用的是对象扩展语法。）

更糟糕的选择是完全禁用由connect（）进行的性能优化。然后，即使你在父级中对道具进行了变异，你的道具也会更新，但你的应用程序会变慢。要执行此操作，请更换

export default connect(mapStateToProps)(GoogleButton)

具有

export default connect(mapStateToProps, null, null, { pure: false })(GoogleButton)

除非绝对必要，否则不要这样做。