海之飞燕

Menu
  • IOS
  • Swift
  • 前端开发
  • Flutter
  • ReactNative
  • Other
Menu

ReactNative中ref使用详解

Posted on 2020年2月17日2020年12月14日 by Herriat

一、什么是ref

ref是组件的一种特殊属性,可以理解为组件被渲染后指向组件的一个引用,我们可以通过ref来获取真实的组件。因为组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,我们称之为虚拟的DOM,只有当它真正的插入文档之后,才变为真正的DOM节点。根据React的设计,所有的DOM变动都发生在虚拟DOM上,然后再将实际的部分反映到真实的DOM上,这就是DOM DIFF,它可以提高页面性能。

二、如何使用ref


<WebView style={{ width: width, height: height }} source = {{uri: this.state.url}} ref={(webView) => {this.webView = webView}} // domStorageEnabled={false} onMessage={this.onMessage.bind(this)} injectedJavaScript={this.getInjectedJS()} onError={this.onError} renderError={this.renderError} onNavigationStateChange={this.onNavigationStateChange.bind(this)} /> updataJS = ()=>{ const token = this.state.token; const insertToken = ` window.token = '${token}'; //调用webView的js注入方法 ` this.webView.injectJavaScript(insertToken); } 只要是webView有的方法都可以通过this.webiVew调用。例如this.webView.reload();

发表评论 取消回复

邮箱地址不会被公开。 必填项已用*标注

近期文章

  • WKWebView加载H5页面,退出时视频继续播放
  • Swift基础知识总结
  • ReactNative-Linking的基本使用
  • ReactNative进度条ProgressViewIOS
  • ReactNative中react-native-webview与js交互
  • ReactNative-SectionList

近期评论

  • Herriat发表在《curl、wget命令下载文件》
  • smm provider panel发表在《curl、wget命令下载文件》
  • www.scoop.it发表在《curl、wget命令下载文件》
  • 金玉游龙发表在《iOS9 Universal Links》
  • 十一岁的加重发表在《iOS-判断字符串是否是空字符串的方法》

文章归档

功能

  • 登录
  • 项目feed
  • 评论feed
  • WordPress.org

友情链接

金玉游龙 为吾优
©2021 海之飞燕 | WordPress Theme by Superbthemes.com