當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

React之JSX入门

發(fā)布時(shí)間：2024/7/23 javascript 44 豆豆

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

React是由ReactJS與React Native組成，其中ReactJS是Facebook開(kāi)源的一個(gè)前端框架，React Native
是ReactJS思想在native上的體現(xiàn)！

JSX并不是一門(mén)新的語(yǔ)言，僅僅是個(gè)語(yǔ)法糖，允許開(kāi)發(fā)者在JavaScript中書(shū)寫(xiě)HTML語(yǔ)法。，最后每個(gè)
HTML標(biāo)簽都轉(zhuǎn)化為JavaScript代碼來(lái)運(yùn)行

1.環(huán)境
2.載入方式
3.標(biāo)簽 HTML標(biāo)簽與 ReactJS創(chuàng)建的組件類標(biāo)簽(首字母一定要大寫(xiě))
4.轉(zhuǎn)換解析器

輸入

轉(zhuǎn)換成： React.createElement(“h3”,null,”輸入”) 返回一個(gè)ReactElement對(duì)象 5.執(zhí)行JavaScript表達(dá)式 var msg=”我是東方耀”;

{msg}

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

我是東方耀

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

ReactJS

ReactJS核心思想：組件化維護(hù)自己的狀態(tài)和UI 自動(dòng)重新渲染

多個(gè)組件組成了一個(gè)ReactJS應(yīng)用

React是全局對(duì)象頂層API與組件API
React.createClass創(chuàng)建組件類的方法
React.render渲染，將指定組件渲染到指定DOM節(jié)點(diǎn)
render:組件級(jí)API,返回組件的內(nèi)部結(jié)構(gòu)
React.render被ReactDOM.render替代

ReactJS組件生命周期

1.創(chuàng)建階段
getDefaultProps：處理props的默認(rèn)值在React.createClass調(diào)用
2.實(shí)例化階段
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、創(chuàng)建階段getDefaultProps:function(){//在創(chuàng)建類的時(shí)候被調(diào)用 this.props該組件的默認(rèn)屬性console.log("getDefaultProps");return {};},//2、實(shí)例化階段getInitialState:function(){//初始化組件的state值，其返回值會(huì)賦值給組件的this.state屬性//獲取this.state的默認(rèn)值console.log("getInitialState");return {};},componentWillMount:function(){//在render之前調(diào)用此方法//業(yè)務(wù)邏輯的處理都應(yīng)該放在這里，如對(duì)state的操作等console.log("componentWillMount");},render:function(){//根據(jù)state值，渲染并返回一個(gè)虛擬DOMconsole.log("render");return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是東方耀</h1>;//這是注釋 React.createElement},componentDidMount:function(){//該方便發(fā)生在render方法之后//在該方法中，ReactJS會(huì)使用render方法返回的虛擬DOM對(duì)象來(lái)創(chuàng)建真實(shí)的DOM結(jié)構(gòu)//組件內(nèi)部可以通過(guò)this.getDOMNode()來(lái)獲取當(dāng)前組件的節(jié)點(diǎn)console.log("componentDidMount");},//3、更新階段，主要發(fā)生在用戶操作之后或父組件有更新的時(shí)候，此時(shí)會(huì)根據(jù)用戶的操作行為進(jìn)行相應(yīng)的頁(yè)面結(jié)構(gòu)的調(diào)整componentWillReceiveProps:function(){//該方法發(fā)生在this.props被修改或父組件調(diào)用setProps()方法之后//調(diào)用this.setState方法來(lái)完成對(duì)state的修改console.log("componentWillRecieveProps");},shouldComponentUpdate:function() {//用來(lái)攔截新的props或state，根據(jù)邏輯來(lái)判斷//是否需要更新console.log("shouldComponentUpdate");return true;},componentWillUpdate:function(){//shouldComponentUpdate返回true的時(shí)候執(zhí)行//組件將更新console.log("componentWillUpdate");},componentDidUpdate:function(){//組件更新完畢，我們常在這里做一些DOM操作console.log("componentDidUpdate");},//4、銷毀階段componentWillUnmount:function(){//銷毀時(shí)被調(diào)用，通常做一些取消事件綁定、移除虛擬DOM中對(duì)應(yīng)的組件數(shù)據(jù)結(jié)構(gòu)、銷毀一些無(wú)效的定時(shí)器等工作console.log("componentWillUnmount");}});ReactDOM.render(<HelloMessage name="React 語(yǔ)法基礎(chǔ)8" /> ,document.getElementById('example'));</script> </body> </html>

組件之間通信實(shí)例

<!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語(yǔ)法基礎(chǔ)" /> ,document.getElementById('example'));</script> </body> </html>

React Native實(shí)戰(zhàn)之調(diào)試與打包發(fā)布

http://localhost:8081/index.android.bundle?platform=android；當(dāng)應(yīng)用啟動(dòng)運(yùn)行的時(shí)候，會(huì)自動(dòng)拉取這
個(gè)bundle文件，該文件里存放的是應(yīng)用的全部邏輯代碼，在目錄中并不存在這個(gè)文件，事實(shí)上，這個(gè)
地址只是一個(gè)請(qǐng)求地址，而非真正的靜態(tài)資源文件，是通過(guò)包服務(wù)器packager通過(guò)動(dòng)態(tài)分析
index.android.js中的依賴，并對(duì)其進(jìn)行合并得到的，而且該服務(wù)允許代碼實(shí)時(shí)渲染。

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

最后它會(huì)生成一個(gè)叫做my-release-key.keystore的密鑰庫(kù)文件

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

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

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

4.添加gradle的android keystore配置
打包的apk在未簽名的情況下,在手機(jī)中（非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代碼混淆來(lái)縮小APK文件的大小

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

def enableProguardInReleaseBuilds = true

6.在/android/目錄中執(zhí)行g(shù)radle assembleRelease命令，打包后的文件在
android/app/build/outputs/apk目錄中，例如app-release.apk。如果打包碰到問(wèn)題可以先執(zhí)行 gradle
clean 清理一下。

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

配置完成之后，運(yùn)行g(shù)radle -v，檢查一下是否安裝無(wú)誤

7.將apk發(fā)布到各大應(yīng)用市場(chǎng)（BUILD SUCCESSFUL）

總結(jié)

以上是生活随笔為你收集整理的React之JSX入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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