react组件的重复渲染是导致react性能下降的一个原因,接下来我们来具体分析一下父组件重绘导致子组件出现没有必要重绘的情况。
首先我们应该有一个父组件
export default class LifecycleScreenExample extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '点击按钮' };
}
render() {
console.log(this.state.text);
return (
<View>
<TouchableOpacity onPress={
this.changeText}>
<Text>{
this.state.text}</Text>
</TouchableOpacity>
<One />
<Two />
</View>
);
}
changeText = () => this.setState({
text: '按钮被点击了' });
}
根据父组件,我们应该还有两个子组件&#