Javascript 如何防止反应重新渲染整个组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41763031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent react from re-rendering the whole component?
提问by Cemre
I adapted the following component definition from hereas 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>
);
}
}
回答by Amio.io
Pure components defined as function will always re-render.
定义为函数的纯组件将始终重新渲染。
Convert the component to a class and prevent the re-render in shouldComponentUpdate()returning false.
将组件转换为类并防止在shouldComponentUpdate() 中重新渲染返回 false。
The signature is shouldComponentUpdate(nextProps, nextState). Say, you prevent re-render by verifying that componet's params haven't changed:
签名是shouldComponentUpdate(nextProps, nextState)。比如说，你通过验证组件的参数没有改变来防止重新渲染：
shouldComponentUpdate(nextProps, nextState){
return !equals(nextProps, this.props); // equals() is your implementation
}
