當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

React之JSX入门

發布時間：2024/7/23 javascript 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 React之JSX入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

React是由ReactJS與React Native組成，其中ReactJS是Facebook開源的一個前端框架，React Native
是ReactJS思想在native上的體現！

JSX并不是一門新的語言，僅僅是個語法糖，允許開發者在JavaScript中書寫HTML語法。，最后每個
HTML標簽都轉化為JavaScript代碼來運行

1.環境
2.載入方式
3.標簽 HTML標簽與 ReactJS創建的組件類標簽(首字母一定要大寫)
4.轉換解析器

輸入

轉換成： React.createElement(“h3”,null,”輸入”) 返回一個ReactElement對象 5.執行JavaScript表達式 var msg=”我是東方耀”;

{msg}

React.createElement(“h1”,null,msg) 6.注釋單行：// 多行：/注釋文本/ 7.屬性 var msg=

我是東方耀

React.createElement(“h1”,{width:”10px”},”我是東方耀”) 8.延展屬性使用ES6的語法 var props={}; props.foo=”1”; props.bar=”1”;

ReactJS

ReactJS核心思想：組件化維護自己的狀態和UI 自動重新渲染

多個組件組成了一個ReactJS應用

React是全局對象頂層API與組件API
React.createClass創建組件類的方法
React.render渲染，將指定組件渲染到指定DOM節點
render:組件級API,返回組件的內部結構
React.render被ReactDOM.render替代

ReactJS組件生命周期

1.創建階段
getDefaultProps：處理props的默認值在React.createClass調用
2.實例化階段
React.render(

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>React組件的生命周期</title><script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel">var HelloMessage=React.createClass({//1、創建階段getDefaultProps:function(){//在創建類的時候被調用 this.props該組件的默認屬性console.log("getDefaultProps");return {};},//2、實例化階段getInitialState:function(){//初始化組件的state值，其返回值會賦值給組件的this.state屬性//獲取this.state的默認值console.log("getInitialState");return {};},componentWillMount:function(){//在render之前調用此方法//業務邏輯的處理都應該放在這里，如對state的操作等console.log("componentWillMount");},render:function(){//根據state值，渲染并返回一個虛擬DOMconsole.log("render");return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是東方耀</h1>;//這是注釋 React.createElement},componentDidMount:function(){//該方便發生在render方法之后//在該方法中，ReactJS會使用render方法返回的虛擬DOM對象來創建真實的DOM結構//組件內部可以通過this.getDOMNode()來獲取當前組件的節點console.log("componentDidMount");},//3、更新階段，主要發生在用戶操作之后或父組件有更新的時候，此時會根據用戶的操作行為進行相應的頁面結構的調整componentWillReceiveProps:function(){//該方法發生在this.props被修改或父組件調用setProps()方法之后//調用this.setState方法來完成對state的修改console.log("componentWillRecieveProps");},shouldComponentUpdate:function() {//用來攔截新的props或state，根據邏輯來判斷//是否需要更新console.log("shouldComponentUpdate");return true;},componentWillUpdate:function(){//shouldComponentUpdate返回true的時候執行//組件將更新console.log("componentWillUpdate");},componentDidUpdate:function(){//組件更新完畢，我們常在這里做一些DOM操作console.log("componentDidUpdate");},//4、銷毀階段componentWillUnmount:function(){//銷毀時被調用，通常做一些取消事件綁定、移除虛擬DOM中對應的組件數據結構、銷毀一些無效的定時器等工作console.log("componentWillUnmount");}});ReactDOM.render(<HelloMessage name="React 語法基礎8" /> ,document.getElementById('example'));</script> </body> </html>

組件之間通信實例

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>React組件通信</title><script type="text/javascript" src="react.js"></script><script type="text/javascript" src="react-dom.js"></script><script type="text/javascript" src="browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel">var Parent=React.createClass({click:function(){this.refs.child.getDOMNode().style.color="red";},render:function(){return (<div onClick={this.click} >Parent is :<Child name={this.props.name} ref="child"></Child></div>);}});var Child=React.createClass({render:function(){return <span> {this.props.name} </span>;}});ReactDOM.render(<Parent name="React語法基礎" /> ,document.getElementById('example'));</script> </body> </html>

React Native實戰之調試與打包發布

http://localhost:8081/index.android.bundle?platform=android；當應用啟動運行的時候，會自動拉取這
個bundle文件，該文件里存放的是應用的全部邏輯代碼，在目錄中并不存在這個文件，事實上，這個
地址只是一個請求地址，而非真正的靜態資源文件，是通過包服務器packager通過動態分析
index.android.js中的依賴，并對其進行合并得到的，而且該服務允許代碼實時渲染。

1.生成一個簽名密鑰
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

最后它會生成一個叫做my-release-key.keystore的密鑰庫文件

2.找到路徑/android/app/src/main，并在該目錄下新建assets文件夾

3.在工程目錄下將index.android.bundle下載并保存到assets資源文件夾中
curl -k “http://localhost:8081/index.android.bundle” > android/app/src/main/assets/index.android.bundle

這句命令是重點，如果assets目錄中不存在該文件，則打包的apk在執行時顯示空白。

Protocol ‘http not supported or disabled in libcurl
Windows下安裝使用curl命令:http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html

4.添加gradle的android keystore配置
打包的apk在未簽名的情況下,在手機中（非root）是不允許安裝的
在build.gradle文件中

//簽名 signingConfigs{ release { storeFile file("/my-release-key.keystore") storePassword "密碼" keyAlias "keyAlias的名字" keyPassword "密碼" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' signingConfig signingConfigs.release //添加這句話引用簽名配置 } }

5.啟用Proguard代碼混淆來縮小APK文件的大小

Proguard是一個Java字節碼混淆壓縮工具，它可以移除掉React Native Java（和它的依賴庫中）中沒
有被使用到的部分，最終有效的減少APK的大小。
重要：啟用Proguard之后，你必須再次全面地測試你的應用。Proguard有時候需要為你引入的每個原
生庫做一些額外的配置。參見app/proguard-rules.pro文件。

def enableProguardInReleaseBuilds = true

6.在/android/目錄中執行gradle assembleRelease命令，打包后的文件在
android/app/build/outputs/apk目錄中，例如app-release.apk。如果打包碰到問題可以先執行 gradle
clean 清理一下。

安裝gradle工具（版本與android\gradle\wrapper下的一致），并配置環境變量，配置GRADLEHOME
到你的gradle根目錄當中，然后把%GRADLEHOME%/bin（linux或mac的是$GRADLE_HOME/bin）加
到PATH的環境變量。

配置完成之后，運行gradle -v，檢查一下是否安裝無誤

7.將apk發布到各大應用市場（BUILD SUCCESSFUL）

總結

以上是生活随笔為你收集整理的React之JSX入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：单片机实验-DA实验
下一篇：建议收藏丨sql行转列的一千种写法！！