javascript - 调用了 mapStateToProps，但未调用 componentDidUpdate

Question

我正在从 api 获取 GameChart 的数据并更改 redux 状态。在 GameChart.jsx 文件中，我在调用 componentDidUpdate 时绘制图表。但是 redux state change 有时不会调用 componentDidUpdate。

---

GameChart.jsx 生命周期的控制台日志

GameChart.jsx 控制台日志，当 componentDidUpdate 没有调用时(它神奇地以 50/50 的几率发生......):

Chart mapStateToProps 
Chart componentDidMount
Chart mapStateToProps 

GameChart.jsx 控制台日志，当一切正常时，componentDidUpdate 被调用，当 redux 状态改变时:

Chart mapStateToProps 
Chart componentDidMount
Chart mapStateToProps 
Chart mapStateToProps 
Chart componentDidUpdate 
Chart mapStateToProps 

---

这是非常示意性的代码:

GameChart.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';

class GameChart extends Component {
    ...

    componentDidMount() { console.log("Chart componentDidMount") }

    componentDidUpdate() {
        console.log("Chart componentDidUpdate");

        /* When socket.js call initGame, and redux update state, I need to 
           render canvas from this state inside GameChart.jsx */

        ... Drawing chart, using data from this.props.game ...
    }

    render() {
        return (
           <canvas ref={...} ... />
        );
    }
}

const mapStateToProps = state => {
    console.log('Chart mapStateToProps');

    return { game: state.game }
};

export default connect(mapStateToProps)(GameChart);

gameReducer.js。 initGame 调用的 Action

case INIT_GAME:
    return {
        status: action.payload.roll !== null ? "rolling" : "betting",
        ...action.payload
    }

socket.js

/* When websocket connected, it sends current game state to client.
Client need to write this state in redux state and re-render
GameChart.jsx, using this new rewrited by dispatch action state */

socket.onmessage = (msg) => {
    store.dispatch(initGame)(msg);
}

---

我检查了 redux-dev-tools。差异选项卡显示，该游戏成功启动并且状态更改为 websocket 提供的状态。我检查了 redux 状态突变，没有状态突变。刷新页面时，有时神奇地没有调用 componentDidUpdate，但有时它会调用。它可以以 50/50 的概率任意调用。

Answer 1

mapStateToProps 将您的 redux 存储连接到组件的 Prop 。当您的 Prop 更新时，组件不会重新呈现(除非 Prop 属于父状态的状态)。componentDidUpdate 在您的组件状态更新时调用。 Prop 的改变不会影响这一点。简而言之，来自 redux store 的 props 不遵循组件的生命周期钩子(Hook)。您可能需要从调用 redux 状态调度的地方触发重新渲染组件。