如何防止重新渲染整个组件的反应？ [英] How to prevent react from re-rendering the whole component?

问题描述

我从

有没有人知道为什么会这样？

  import React ，{Component}来自'react'; 
从'recharts'导入{PieChart，Pie，Sector}; 
从'semantic-ui-react'导入{Segment，Header，Dimmer，Loader，Grid}; 
 
 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？ '开始'：'结束'; 
 
返回（
< g> 
< text x = {cx} y = {cy} dy = {8} textAnchor =middlefill = {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} f ill =＃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> 
）; 
}; 
 
导出默认类TwoLevelPie扩展Component {
 
构造函数（props）{
 super（props）; 
 this.state = {activeIndex：0} 
 this.onPieEnter = this.onPieEnter.bind（this）; 
} 
 
 onPieEnter（数据，索引）{
 this.setState（{
 activeIndex：index 
}）; 
} 
 
 render（）{
 
 const data = [{name：'Group A'，value：400}，{name：'Group B'，价值：300}，
 {名称：'C组'，价值：300}，{名称：'D组'，价值：200}]; 
 
返回（
<段落倒置> 
< 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> 
）; 
} 
} 
  

解决方案

Pure定义为函数的组件将始终重新呈现。

将组件转换为类并阻止在 shouldComponentUpdate（）返回false。

签名是 shouldComponentUpdate（nextProps，nextState ）。比如说，你通过验证组件的参数没有改变来阻止重新渲染：

  shouldComponentUpdate（nextProps，nextState）{
 return！equals（nextProps，this.props）; // equals（）是你的实现
} 
  

I adapted the following component definition from here as shown below. However, unlike the example my component re-renders every time I move the mouse on it.

The re-rendering is very noticable:

Does anyone have an idea why this is happening ?

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>
    );
}
}

解决方案

Pure components defined as function will always re-render.

Convert the component to a class and prevent the re-render in shouldComponentUpdate() returning false.

The signature is shouldComponentUpdate(nextProps, nextState). Say, you prevent re-render by verifying that componet's params haven't changed:

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

这篇关于如何防止重新渲染整个组件的反应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！