为什么子组件会更新而不重新渲染Reactjs

Question

我有一个带有子图表组件的主要组件。 连接到Websocket时，主要组件将更新子图表组件的状态。 但是，这不会重绘。 但是，当我单击图表时，将显示标签，而当我再次单击时，值将与标签一起显示。

Main.js：

import IO from 'socket.io-client';
import React from "react";

import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";

let ftse100Tickers = require('./ftse_100_tickers.json');
let randomInt = Math.floor(Math.random() * ftse100Tickers.tickers.length);

/**
 * Main application component which contains
 */
export class Main extends React.Component {
    componentWillMount() {
        this.socket = IO(location.protocol + "//" + document.domain + ":" + location.port);
        this.socket.on("connect", (() => this.connect()));
        this.socket.on("disconnect", (() => this.disconnect()));
        this.socket.on("initial data", ((data) => this.createInitialChart(data)))
    }

    connect(){
        this.setState({status: 'connected'});
        this.socket.emit("get initial data", this.state.ticker);
    }

    disconnect(){
        this.setState({status: 'disconnected'})
    }

    createInitialChart(data){
        let tempErrorChart= this.state.errorChart;
        for (let row of data){
            tempErrorChart.labels.push(row.time_stamp);
            tempErrorChart.datasets[0].data.push(row.error);
        }
        this.setState({errorChart: tempErrorChart});
    }


    constructor(props){
        super(props);
        this.state = {
            errorChart: {
                labels: [],
                datasets: [
                    {
                        label: 'Error',
                        data: [],
                    },
                ]
            },
            status: 'disconnected',
            ticker : ftse100Tickers.tickers[randomInt],
            twitter : ftse100Tickers.twitter[randomInt]
        }
    }
    render() {
        return (
            <div className="row">
                <div className="row">
                    <div className="col-lg-6">
                        <div className="card border-0">
                            <div className="card-body">
                                <Chart chart={this.state.errorChart}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

图表组件是这样的：

Chart.js

import { Line } from "react-chartjs-2"
import React from "react";

/*
 * General charting component used for rendering charts
 */
export class Chart extends React.Component {

    render() {
        return (
            <Line data={this.props.chart} options={{}}/>
        )
    }
}

Answer 1

我看到一个问题，那就是在调用setState之前，在errorChart更新时您没有在this.state.errorChart更改对象引用。 即使您将其新属性推入其属性，该对象甚至内部数组引用也不会更改，并且如果Line组件对是否应重新呈现自身进行了一些支持，则它会通过接收仍然相同的引用来表示数字已经更改，因此无需重新渲染。

现在，这只是我的假设，但是无论哪种方式，当这些对象即将被修改时， 始终在创建新对象的同时创建新状态是一个好习惯。 这允许在shouldComponentUpdate方法中或在使用PureComponent进行快速的对象（状态）引用比较，从而可以更轻松，更PureComponent地确定是否重新渲染组件。 另一方面，如果仍然使用相同的引用，则必须对旧状态和新状态进行深入比较，从长远来看，这肯定会更昂贵且非常脆弱。

有关如何正确更新状态的示例如下：

createInitialChart(data) {
  const errorChart = this.state.errorChart

  const newErrorChart = {
    ...errorChart
  }

  newErrorChart.labels = [...errorChart.labels, data.map(row => row.time_stamp)]
  newErrorChart.datasets[0].data = [
    ...errorChart.datasets[0].data,
    data.map(row => row.error)
  ]

  this.setState({ errorChart: newErrorChart })
}

编辑：通过查看组件的shouldComponentUpdate实现-ChartComponent ，可以清楚地看到，关于如何使Line重新渲染有多个选项。 通过为Line组件提供redraw={true}属性。 上面的过程通常仍然是确保重新提交的最安全方法。

Answer 2

您可能需要componentWillReceiveProps（nextProps，nextState）。 您可以在此处将旧状态与新状态进行比较，并相应地更新状态。

请像这样设置initialState：

constructor(props){
 super(props);
 this.state = {errorChart: {...}}; //your initial values here.
}

然后，

componentWillReceiveProps(nextProps, nextState){
 if(this.state.errorChart !== nextState.errorChart){
   let tempErrorChart = {...this.state.errorChart};
    for (let row of data){
        tempErrorChart.labels.push(row.time_stamp);
        tempErrorChart.datasets[0].data.push(row.error);
    }
    this.setState({errorChart: tempErrorChart});
 }
}