ReactNative 0.61之Fast Refresh

原文链接:https://facebook.github.io/react-native/blog/2019/09/18/version-0.61

快速刷新

在React Native的社区中关于最常见的痛点问题中,有一个最多的回答是“hot reloading”-热加载功能不能用了。在我们编写函数组件的时候不能正常工作,经常无法无法更新屏幕,也不能对拼写错误和错误做出正确的反映。因为这个功能不可靠,许多人都关闭了这个功能。
在这里插入图片描述
在这里插入图片描述
在ReactNative 0.61版本中,我们将现在的“Live Realod”和“Hot Relaoding”功能合并成了一个新功能叫“Fast Refresh”。Fast Refrsh是根据以下原则来重新实现的:

  • Fast Refresh全面支持最新的React版本,包括函数组件和Hooks
  • Fast Refresh在出现拼写错误和其他错误时能够正常好的恢复,并且在需要时可以回滚去重新全部加载
  • Fash Refresh不会对代码进行侵入性转换,因此可以放心的设置为默认打开。

下面是一个演示视频地址:Fast Refresh Video

下面是一些关于Fast Refresh的小提示:

  • Fast Refresh默认会在函数式组件(和 Hooks)中保留React的当前状态
  • 如果你需要每次编译都重置React State,你需要在文件中添加一个特殊的 // @refresh reset命令到组件上。
  • Fast Refresh总会在不保留状态的情况下,重新装载类组件。这样可以确保它是可靠的。
  • 在代码中我们总会犯错!Fast Refresh在你保存文件的时候会自动尝试重新加载。修复拼写错误或者一个运行时报错后,你不需要手动重新加载你的APP。
  • 在写代码的手添加console.log或者debugger调试语块是一个非常棒的调试技巧。

其他改进

  • 修复了在0.60版本中使用 use_frameworks问题以及对CocoaPods的支持。
  • 增加了useWindowDimensions 钩子函数,多数情况下可以替换DimensionAPI
  • React 版本更新到了16.9,移除了一些不安全的生命周期函数名称。

重大变化

  • 从0.61版本开始,移除了对React .xcodeproj的支持并删除的相关文件。

个人水平有限,难免翻译的有不正确的地方,希望大家谅解。

欢迎大家关注我的公众号:君伟说,或者添加我个人微信:wayne214。相互交流共同进步。

扫一扫二维码,关注我的公众号

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 React Native 中实现 App ID 或微信用户登录可以使用第三方登录库来实现。 首先,你需要在 App ID 或微信开放平台上注册你的应用,然后获取到应用的 appId 和 appSecret。 然后,你可以使用 react-native-app-auth 库来实现 OAuth2.0 授权流程。这个库支持许多第三方登录平台,包括 App ID 和微信。 你可以使用以下步骤来实现登录: 1. 安装 react-native-app-auth 库: ``` yarn add react-native-app-auth ``` 2. 在你的组件中引入库: ``` import { authorize, refresh } from 'react-native-app-auth'; ``` 3. 在你的组件中定义登录配置对象,包括应用的 appId 和 appSecret,以及登录所需的其他信息,如 redirectUrl 等: ``` const config = { clientId: 'YOUR_APP_ID', clientSecret: 'YOUR_APP_SECRET', redirectUrl: 'YOUR_REDIRECT_URL', serviceConfiguration: { authorizationEndpoint: 'https://open.weixin.qq.com/connect/oauth2/authorize', tokenEndpoint: 'https://api.weixin.qq.com/sns/oauth2/access_token', revocationEndpoint: 'https://api.weixin.qq.com/sns/oauth2/refresh_token', }, }; ``` 4. 调用 authorize 方法来开始登录流程: ``` const result = await authorize(config); ``` 登录成功后,result 对象中会包含登录后获取到的 accessToken 和其他信息。你可以使用这些信息来调用 API 获取用户信息等。 注意 ### 回答2: 使用React Native实现APP ID或微信用户登录可以通过以下步骤进行: 1. 集成第三方登录库:React Native提供了许多第三方库,可以实现APP ID或微信用户登录。可以在项目中使用npm或yarn来安装适用于React Native的第三方登录库,如"react-native-login-with"库。 2. 配置第三方登录:安装完相应的库后,需要根据第三方登录提供的开发者文档进行配置。对于APP ID登录功能,通常需要在项目中配置应用的APP ID和相应的密钥,以及其他需要的参数。对于微信用户登录,需要在开放平台注册应用,获取App ID和App Secret,并配置回调URL等。 3. 创建登录界面:创建一个用于用户登录的界面,可以使用React Native提供的组件来实现。界面通常包含表单、按钮等元素,用户可以输入用户名和密码进行登录。 4. 处理登录逻辑:在登录界面中,使用第三方登录库提供的API进行登录逻辑的处理。对于APP ID登录,需要调用相应的登录API并传递用户输入的用户名和密码。对于微信用户登录,需要调用微信提供的API进行用户授权,并获取到用户的AccessToken等信息。 5. 处理登录结果:根据登录逻辑返回的结果,可以根据需求进行处理。例如,可以根据登录结果跳转到不同的页面,或者在登录失败时给出错误提示。 6. 存储登录状态:登录成功后,可以将用户的登录状态保存在本地,以便下次打开应用时可以自动登录。可以使用React Native提供的AsyncStorage等方法来实现数据的本地存储。 以上就是使用React Native实现APP ID或微信用户登录的大致步骤。根据具体需求和第三方登录库的文档,可能还需要做其他的相关配置和处理。 ### 回答3: 使用React Native实现APPID或微信用户登录,可以通过第三方库react-native-wechat来完成。 首先,需要在自己的React Native项目中安装react-native-wechat库。可以使用npm或yarn来进行安装: ``` npm install react-native-wechat --save ``` 然后,在项目的入口文件中导入react-native-wechat库,并初始化微信SDK: ```javascript import WeChat from 'react-native-wechat'; // 初始化微信SDK WeChat.registerApp('YOUR_WECHAT_APPID'); ``` 在登录按钮的点击事件中,调用微信登录的方法并处理登录结果: ```javascript import WeChat from 'react-native-wechat'; // 微信登录 const handleWeChatLogin = async () => { try { // 检查微信是否可用 const isWeChatInstalled = await WeChat.isWXAppInstalled(); if (!isWeChatInstalled) { console.log('请安装微信'); return; } // 发起微信登录 const result = await WeChat.sendAuthRequest('snsapi_userinfo'); if (result && result.state === 'success') { const code = result.code; // 用于换取access_token的临时code // 处理登录逻辑,向服务器传递code进行后续认证操作 // ... } else { console.log('用户取消了登录'); } } catch (error) { console.log('微信登录失败:', error); } }; ``` 以上代码演示了微信登录的基本流程,可以根据自己的需求添加相应的业务逻辑。需要注意的是,React Native中实现微信登录需要在微信开放平台申请相应的APPID,并进行配置。 通过以上的操作,就可以在React Native应用中实现APPID或微信用户登录了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值