React Native-重新安装/重置/重新加载屏幕的最佳方式是什么?

React中一个常用的技巧是更改 key 组件的道具,以强制重新装载视图:

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将得出结论,认为以前的元素不再存在,因此将删除它并创建“新”元素。

也就是说,只有当要清除的状态存储在子组件树中的有状态组件中(例如 uncontrolled TextInput 它没有 value 道具套件)。

更清洁的解决方案是制作所有子组件 controlled 因此,组件的UI是其道具和状态的纯功能,只需重置组件状态:

const initialState = {
  //...
}

class Thing extends React.Component {
  state = initialState;
  resetState = () => {
    this.setState(initialState);
  }
  render() {
    return (
      <View}>
        <Button onPress={this.resetState} />
      </View>
    )
  }
}

我的解决方案是使用redux让第二个页面刷新全局状态。然后在第一个页面(返回时),使用useffect根据全局状态中元素的更改刷新所需的数据。 从父(第一)页:

import { useSelector } from 'react-redux';
const contacts_update = useSelector( state => state.contact.profile)

useEffect(() => {
  loadContacts();
}, [contacts_update]);

您可以添加 // @refresh reset => https://reactnative.dev/docs/fast-refresh#tips