React native：渲染后的useEffect显示

Posted 2023-05-06

【中文标题】React native：渲染后的useEffect显示

【英文标题】：React native : useEffect display after render

【发布时间】：2021-10-26 18:14:46

【问题描述】：

我有这个 React Native 代码

    const showMessage = () => 
      const [message,setMessage] = useState('default message');
      useEffect(()=> 
        setMessage('new message')
      , []);

      return (
        <View>
          <Text>
            message
          </Text>
        </View>
      );
    
    export default showMessage;

我知道useEffect 在渲染后运行，所以这是否意味着应用程序会显示“默认消息”即使是一微秒（所以如果我录制手机屏幕的视频并让它变得非常慢（x100慢一点我就能看到'default message'）然后显示'new message'，还是直接显示'new message'？

【参考方案1】：

是的， 将显示默认消息。

为了防止您应该检查消息状态和 返回空视图。

如果我是你，我会使用 null 作为初始状态

和

消息 === null && 查看