View 已经是 react native 中的纯组件了吗?

Question

在 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(( 函数。同级视图(宽度 B(也会重新渲染吗？是否有任何性能提升需要定义

class PureView extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
return <View {...this.props} />
}
}

并将两个视图替换为 PureView？

Answer 1

实际上，是的，重新渲染会发生，因为在 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.