在React Native中，说我有类似的东西
var styles = { ... }
export default class App extends React.Component {
...
render() {
return(
<View style={styles.container}>
<View style={{width: this.state.widthA}} />
<View style={{width: this.state.widthB}} />
</View>
);
}
}
状态widthA改变时，将再次调用render（）函数。兄弟视图（widthB）是否也会重新渲染？可以定义任何性能提升吗
class PureView extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
return <View {...this.props} />
}
}
并用PureView替换两个视图？
实际上，会发生重新渲染，因为react中的重新渲染属于两件事。
1. The props of the parent is changed.
2. The state of a component changed.
因此，在您的情况下，组件的状态正在更改，这就是您的兄弟姐妹也将重新渲染的原因，因为这两个兄弟姐妹的父代的状态已更改。
为了避免这种情况，有两个这样做。
1. Use Pure component
纯组件查看了先前的状态和下一个状态，并巧妙地处理了重新渲染，但是纯组件在每种情况下都不适用或有用。
2. ShouldComponentUpdate
此方法用于手动处理重新渲染，就像您不想重新渲染第二个同级的情况一样，因此您可以根据同级生命周期方法中的prop返回false，这样该组件就不会重新生成通过此更改进行渲染。
The View is just a UI container re-rendering depends on component props or state, So View can't control the re-render of a component。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句