如何防止重新渲染整个组件的反应？

本文介绍了如何防止重新渲染整个组件的反应？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我从

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

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 }