React中经常使用的一种破解方法是更改组件的key
props ,以强制重新安装视图:
class Thing extends React.Component {
state = {
uniqueValue: 1
}
forceRemount = () => {
this.setState(({ uniqueValue }) => ({
uniqueValue: uniqueValue + 1
});
}
render() {
return (
<View key={this.state.uniqueValue}>
<Button onPress={this.forceRemount} />
</View>
)
}
}
React使用元素关键点跟踪要更新的元素,如果关键点发生更改,React将得出结论,前一个元素不再存在,因此它将被删除并创建"新"元素.
也就是说,只有当要清除的状态存储在子组件树中的有状态组件中(例如,未设置value
props 的uncontrolled TextInput
)时,这才有效.
一个更干净的解决方案是将所有子组件设置为controlled,这样组件的UI就完全是其props 和状态的函数,只需重置组件状态:
const initialState = {
//...
}
class Thing extends React.Component {
state = initialState;
resetState = () => {
this.setState(initialState);
}
render() {
return (
<View}>
<Button onPress={this.resetState} />
</View>
)
}
}