react里面為什么要使用大括號{}：

認(rèn)識(shí)JSX
JSX是一種JavaScript的語法擴(kuò)展(eXtension)，也在很多地方稱之為JavaScript XML，因?yàn)榭雌鹁褪且欢蝀ML語法

它用于描述我們的UI界面，JSX會(huì)被解析為ReactRenderObject，所以JSX本質(zhì)就是JS對象, 所以JSX可以和JavaScript融合在一起使用

JSX其實(shí)是將HTML嵌入到JavaScript中的一種結(jié)構(gòu)語法

// JSX本質(zhì)就是對象，所以其可以作為變量來進(jìn)行使用 const msg = <h2>Hello World</h2>ReactDOM.render(msg, document.getElementById('app'))

React為什么使用JSX
React認(rèn)為渲染邏輯本質(zhì)上與其他UI邏輯存在內(nèi)在耦合

• 比如UI需要綁定事件(button、a元素等等)
• 比如UI中需要展示數(shù)據(jù)狀態(tài)，在某些狀態(tài)發(fā)生改變時(shí)，又需要改變UI

他們之間是密不可分，所以React沒有講標(biāo)記分離到不同的文件中，而是將它們組合到了一起，這個(gè)地方就是組件 (Component)。
書寫規(guī)范

JSX的頂層只能有一個(gè)根元素，所以我們很多時(shí)候會(huì)在外層包裹一個(gè)div元素或Fragment組件

為了方便閱讀，我們通常在jsx的外層包裹一個(gè)小括號()，但這僅僅是為了方便我們閱讀和JSX代碼換行，不是必須的

JSX中的標(biāo)簽可以是單標(biāo)簽，也可以是雙標(biāo)簽，但如果是單標(biāo)簽，必須使用/來進(jìn)行閉合，也就是要使用嚴(yán)格模式來閉合標(biāo)簽。

// JSX的{}中可以寫JS語法，其中也就可以寫JS注釋 {/* 這里是JSX的塊級注釋內(nèi)容 */}{// 這里是JS的單行注釋內(nèi)容// 注意: //和{之間必須換行，否則無法正常解析} }

嵌入值
JSX使用大括號語法來嵌入值，在大括號中可以書寫的是任意合法的JS變量或合法的JS表達(dá)式
變量

• 當(dāng)變量是Number、String、Array類型時(shí)，可以直接顯示 ，當(dāng)變量是null、undefined、Boolean類型時(shí)，內(nèi)容為空
• 如果希望可以顯示null、undefined、Boolean，那么需要轉(zhuǎn)成字符串 例如使用toString，String，拼接空字符串
  因?yàn)閡ndefined和null是無法調(diào)用函數(shù)的，所以推薦使用拼接空字符串的方式來進(jìn)行轉(zhuǎn)換
  對于Boolean類型的值，無論值是true還是false，其都不會(huì)在界面上進(jìn)行顯示 對象類型不能作為子元素(not valid as a React child)
• JSX會(huì)轉(zhuǎn)換為React.createElement，而其第三個(gè)參數(shù)children即使當(dāng)前元素所對應(yīng)的子元素
• 而children數(shù)組中是不可以有對象的，也就是說對象不可以寫在大括號語法中。

class App extends React.Component {constructor() {this.state = {firstName: 'klaus',lastName: 'Wang',isLogin: false}}render() {// 對象的解構(gòu)，可以使用常量來進(jìn)行接收// 因?yàn)槊恳淮谓缑嫠⑿碌臅r(shí)候，其都會(huì)重新執(zhí)行一遍render函數(shù)// 也就是會(huì)生成一個(gè)新的函數(shù)作用域，因此解構(gòu)出的變量可以使用常量來進(jìn)行接收const { firstName, lastName, isLogin } = this.statereturn (// 雖然JSX可以使用Fragment進(jìn)行包裹(也就是使用<></>來進(jìn)行包裹)// 但是Fragment只能在腳手架中使用，在CDN引入的時(shí)候無法使用<div>{/* JSX中可以書寫合法的JS表達(dá)式 */}<div>{ firstName + ' ' + lastName }</div>{/*JSX中可以編寫三目運(yùn)算符在實(shí)際開發(fā)中，LoginOut和LoginIn可能對應(yīng)著是變量為了避免變量為null或undefined的時(shí)候，在界面顯示出現(xiàn)bug隨意null和undefined在JSX中一般不會(huì)顯示在界面上*/}<div>{ isLogin ? 'LoginOut' : 'LoginIn' }</div>{/*邏輯運(yùn)算符JSX中，會(huì)出現(xiàn)許多通過邏輯運(yùn)算符來決定渲染內(nèi)容的情況所以JSX中如果需要顯示的是boolean類型的時(shí)候，無論結(jié)果為true還是false其值都不會(huì)顯示，以避免出現(xiàn)顯示bug例如: isLogin && 'welcome'中 如果isLogin的值為false那么表達(dá)式的結(jié)果為false，此時(shí)在界面上顯示false明顯是不合理的*/}<div>{ isLogin && 'welcome' }</div>{/*函數(shù)調(diào)用JSX中可以進(jìn)行函數(shù)的調(diào)用也可以使用一些方法，例如map, filter, some等*/}<div>{ this.getFullName() }</div></div>)}getFullName() {return this.state.firstName + ' ' + this.state.lastName}}ReactDOM.render(<App />, document.getElementById('app'))

react中大括號{}的基本用途：

綁定屬性

普通屬性

{/* 可以使用大括號語法來綁定普通屬性 */} <a href={ this.state.link }>google</a>

class

{/*class是js的關(guān)鍵字，而JSX本質(zhì)就是all in js所以為了避免HTML書寫和JS關(guān)鍵字沖突JSX為對應(yīng)的HTML屬性起了別名class -> classNamefor -> htmlFor*/} <h2 className={`titile ${this.state.isActive && 'active'}`}>Lorem</h2>

react內(nèi)聯(lián)樣式是花括號應(yīng)用之一
style

{/*第一個(gè)大括號表示內(nèi)部使用JS語法第二個(gè)大括號表示里面的值是一個(gè)對象style中的屬性值 如果是字符串需要加上引號因?yàn)槭窃趯ο笾?#xff0c;如果不加引號，會(huì)被解析為對象 */} <h2 style={{color: '#fff',backgroundColor: 'skyblue','font-size': '20px' }}>Lorem</h2>

事件綁定

class App extends React.Component {constructor() {super()this.state = {count: 100}}// render方法在編譯后，是通過App組件的實(shí)例對象來進(jìn)行調(diào)用的// 所以在render函數(shù)中，this的指向是正確的render() {return (<div><button onClick={ this.getCount }>click me</button></div>)}getCount() {// 在React中，對HTML生事件進(jìn)行了二次封裝// 而HTML原生事件是所有組件都可以調(diào)用的// 所以React在封裝HTML原生事件的時(shí)候，并不知道具體的調(diào)用者// 所以React在執(zhí)行傳入的原生事件回調(diào)的時(shí)候，使用了`call(undefined)`// 因此在React中 默認(rèn)情況下原生HTML事件回調(diào)中的this是undefined// 我們在使用的時(shí)候，需要對this的指向進(jìn)行修正console.log(this) // => undefined} }

解決方法1 – 使用bind方法

{/*使用bind進(jìn)行綁定的時(shí)候，可以返回一個(gè)擁有正確this指向的新函數(shù)但是如果在jsx中多次調(diào)用同樣函數(shù)的時(shí)候，需要多次重復(fù)使用bind方法來修正this指向 */} <button onClick={ this.getCount.bind(this) }>click me</button> <button onClick={ this.getCount.bind(this) }>click me</button> class App extends React.Component {constructor() {super()this.state = {count: 100}// 我們可以在構(gòu)造函數(shù)中 一次性對某個(gè)方法進(jìn)行this的修正// 但是這就意味著所有的函數(shù)都需要在構(gòu)造器中使用bind方法修正this指向// 而實(shí)際開發(fā)中，組件內(nèi)部的函數(shù)是很多的，如果都在構(gòu)造器中修正this指向// 必然會(huì)導(dǎo)致構(gòu)造函數(shù)過于繁瑣，不利于維護(hù)this.getCount = this.getCount.bind(this)}render() {return (<div><button onClick={ this.getCount }>click me</button><button onClick={ this.getCount }>click me</button></div>)}getCount() {console.log(this.state.count)} }

解決方法二 – 使用class field

class App extends React.Component {constructor() {super()this.state = {count: 100}}render() {return (<div>{/* 綁定事件的時(shí)候，傳入的其實(shí)是對應(yīng)事件的引用地址 */}<button onClick={ this.getCount }>click me</button></div>)}// 在定義函數(shù)的時(shí)候，使用class fields定義類的成員變量// 并且在定義函數(shù)的時(shí)候，使用箭頭函數(shù)// 而類中的方法，本質(zhì)上都是通過類的實(shí)例去進(jìn)行調(diào)用的// 所以類的成員變量的上層作用域是App類// 因此在這里， 我們可以獲取正確的this指向getCount = () => {console.log(this.state.count)} }

解決方法三 – 使用箭頭函數(shù) — 推薦

class App extends React.Component {constructor() {super()this.state = {count: 100}}render() {return (<div>{/*在調(diào)用函數(shù)的時(shí)候在外層包裹一層箭頭函數(shù)1. 如果在事件調(diào)用的時(shí)候傳入箭頭函數(shù)，其上層作用域是render函數(shù)，所以擁有正確的this指向2. 在箭頭函數(shù)的執(zhí)行體中，是去調(diào)用我們實(shí)際需要執(zhí)行的函數(shù)，此時(shí)不是引用地址，而是具體的函數(shù)調(diào)用所以使用這種方法進(jìn)行事件的綁定 便于我們進(jìn)行函數(shù)參數(shù)的傳遞*/}<button onClick={ () => { this.getCount() }}>click me</button></div>)}getCount() {console.log(this.state.count)} }

參數(shù)傳遞

class App extends React.Component {constructor() {super()this.state = {count: 100}}render() {return (<div><button onClick={ this.handleClick }>click me</button>{/*使用箭頭函數(shù)修正this后，默認(rèn)的事件對象是傳遞給外層的箭頭函數(shù)的所以在箭頭函數(shù)體中進(jìn)行函數(shù)實(shí)際調(diào)用的時(shí)候,事件對象作為第幾個(gè)參數(shù)傳入還是不進(jìn)行傳入就可以由我們自己進(jìn)行主動(dòng)控制*/}<button onClick={ e => { this.calcCount(2, e) }}>click me</button></div>)}// 默認(rèn)情況下，JSX在進(jìn)行事件綁定的時(shí)候，會(huì)默認(rèn)將事件參數(shù)傳入// ps: 這個(gè)參數(shù)并不是原生事件對象，而是React基于原生事件對象二次封裝得到的合成對象// 原生的事件對象位于 e.nativeEventhandleClick(e) {console.log(e)}calcCount(step, e) {console.log(this.state.count * step)console.log(e)} }

條件渲染
某些情況下，界面的內(nèi)容會(huì)根據(jù)不同的情況顯示不同的內(nèi)容，或者決定是否渲染某部分內(nèi)容

class App extends React.Component {constructor() {super()this.state = {isLogin: true}}// 和渲染UI相關(guān)的函數(shù)，寫在render函數(shù)的上邊renderText() {// 使用if進(jìn)行條件判斷，適合于邏輯比較復(fù)雜的情況if (this.state.isLogin) {return '歡迎回來'} else {return '請先登錄'}}render() {return (<div><h1>{ this.renderText() }</h1>{/* 使用三目運(yùn)算符來進(jìn)行條件分支的判斷 */}<button onClick={ () => this.changeLoginStatus() }>{ this.state.isLogin ? '退出' : '登錄' }</button><hr />{/* 通過邏輯運(yùn)算符來實(shí)現(xiàn)條件分支的判斷 */}{ this.state.isLogin && <p>您已經(jīng)成功登錄</p> }</div>)}// 和渲染UI無關(guān)，但是和業(yè)務(wù)邏輯有關(guān)的函數(shù)，寫在render函數(shù)的后邊changeLoginStatus() {this.setState({isLogin: !this.state.isLogin})} }

模擬v-show

class App extends React.Component {constructor() {super()this.state = {isLogin: true}}render() {return (<div><button onClick={ () => this.changeLoginStatus() }>change login status</button><h2 style={{ display: this.state.isLogin ? 'block' : 'none' }} >登錄成功</h2></div>)}changeLoginStatus() {this.setState({isLogin: !this.state.isLogin})} }

列表渲染
在React中，我們可以通過map，filter，slice等一系列的JavaScript函數(shù)來幫助我們實(shí)現(xiàn)列表渲染

class App extends React.Component {constructor() {super()this.state = {nums: [10, 23, 35, 122, 78, 4331, 23, 62]}}render() {return (// 以列表形式展示出nums中所有的偶數(shù)數(shù)據(jù)<ul>{this.state.nums.filter(num => num % 2 === 0).map(num => <li>{num}</li>)}</ul>)} }

具體參考簡書夏日夜的晚風(fēng)博客，希望技術(shù)平臺(tái)都可以是開源平臺(tái)，供大家學(xué)習(xí)討論交流。
https://www.jianshu.com/p/a3cacda534e4

總結(jié)

以上是生活随笔為你收集整理的react大括号的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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