Question

我正在试图找出为什么子状态会导致反应组件在该子集发生变化时不重新渲染。这是我的代码：

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {PieChart, Pie} from 'recharts';


class MyPieChart extends Component{
    render() {
        var data = [
            {name: 'var1', value: this.props.myData['var1']},
            {name: 'var2', value: this.props.myData['var2']}
        ]

        return (
            <PieChart width={800} height={400}>
                <Pie data={data} cx={200} cy={200} innerRadius={70} outerRadius={90} fill="#82ca9d"/>
            </PieChart>
        );
  }
}

function mapStateToProps(state, props) {
    return {
        myData: state.components[props.component]
    }
}


export default connect(mapStateToProps)(MyPieChart);

myData更改时不会触发渲染功能。减速器设置myData由滑块上的移动触发。

但是，如果我使用以下内容更改mapStateToProps功能

function mapStateToProps(state, props) {
    return {
        myData: state.components[props.component],
        state: state.components
    }
}

然后一切正常，每次我更改滑块上的值时，组件都会渲染。

所以我的问题是：你能在组件中使用状态的子集，还是只能给它提供所需的信息。

在我的情况下，每当应用程序中的某个值发生变化时，这将重新渲染，这不是我猜的最佳性能。

当只有状态的子集映射到props时，React组件不会重新呈现

0 个答案: