web-dev-qa-db-fra.com

Comment empêcher React de restituer l'intégralité du composant?

J'ai adapté la définition de composant suivante de ici comme indiqué ci-dessous. Cependant, contrairement à l'exemple, mon composant est rendu à chaque fois que je déplace la souris dessus.

Le re-rendu est très perceptible:

enter image description here

Quelqu'un at-il une idée pourquoi cela se produit?

import React, { Component } from 'react';
import { PieChart, Pie, Sector } from 'recharts';
import { Segment, Header, Dimmer, Loader, Grid } from 'semantic-ui-react';

const renderActiveShape = (props) => {

const RADIAN = Math.PI / 180;
const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
    fill, payload, percent, value } = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos;
const sy = cy + (outerRadius + 10) * sin;
const mx = cx + (outerRadius + 30) * cos;
const my = cy + (outerRadius + 30) * sin;
const ex = mx + (cos >= 0 ? 1 : -1) * 22;
const ey = my;
const textAnchor = cos >= 0 ? 'start' : 'end';

return (
    <g>
        <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>{payload.name}</text>
        <Sector
            cx={cx}
            cy={cy}
            innerRadius={innerRadius}
            outerRadius={outerRadius}
            startAngle={startAngle}
            endAngle={endAngle}
            fill={fill}
            />
        <Sector
            cx={cx}
            cy={cy}
            startAngle={startAngle}
            endAngle={endAngle}
            innerRadius={outerRadius + 6}
            outerRadius={outerRadius + 10}
            fill={fill}
            />
        <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`PV ${value}`}</text>
        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
            {`(Rate ${(percent * 100).toFixed(2)}%)`}
        </text>
    </g>
);
};

export default class TwoLevelPie extends Component {

constructor(props) {
    super(props);
    this.state = { activeIndex: 0 }
    this.onPieEnter = this.onPieEnter.bind(this);
}

onPieEnter(data, index) {
    this.setState({
        activeIndex: index
    });
}

render() {

    const data = [{ name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
    { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }];

    return (
        <Segment inverted>
            <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
                <Pie
                    activeIndex={this.state.activeIndex}
                    activeShape={renderActiveShape}
                    data={data}
                    cx={300}
                    cy={200}
                    innerRadius={60}
                    outerRadius={80}
                    fill="#8884d8" />
            </PieChart>
        </Segment>
    );
}
}
javascriptreactjsecmascript-6
14
Cemre

Les composants purs définis comme fonction seront toujours restitués.

Convertissez le composant en classe et empêchez le nouveau rendu dans shouldComponentUpdate () renvoyant false.

La signature est shouldComponentUpdate(nextProps, nextState). Dites, vous empêchez le nouveau rendu en vérifiant que les paramètres du composant n'ont pas changé:

shouldComponentUpdate(nextProps, nextState){
   return !equals(nextProps, this.props); // equals() is your implementation
}
20
Amio.io