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

認識JSX
JSX是一種JavaScript的語法擴展(eXtension)，也在很多地方稱之為JavaScript XML，因為看起就是一段XML語法

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

JSX其實是將HTML嵌入到JavaScript中的一種結構語法

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

React為什么使用JSX
React認為渲染邏輯本質上與其他UI邏輯存在內在耦合

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

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

JSX的頂層只能有一個根元素，所以我們很多時候會在外層包裹一個div元素或Fragment組件

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

JSX中的標簽可以是單標簽，也可以是雙標簽，但如果是單標簽，必須使用/來進行閉合，也就是要使用嚴格模式來閉合標簽。

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

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

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

class App extends React.Component {constructor() {this.state = {firstName: 'klaus',lastName: 'Wang',isLogin: false}}render() {// 對象的解構，可以使用常量來進行接收// 因為每一次界面刷新的時候，其都會重新執(zhí)行一遍render函數// 也就是會生成一個新的函數作用域，因此解構出的變量可以使用常量來進行接收const { firstName, lastName, isLogin } = this.statereturn (// 雖然JSX可以使用Fragment進行包裹(也就是使用<></>來進行包裹)// 但是Fragment只能在腳手架中使用，在CDN引入的時候無法使用<div>{/* JSX中可以書寫合法的JS表達式 */}<div>{ firstName + ' ' + lastName }</div>{/*JSX中可以編寫三目運算符在實際開發(fā)中，LoginOut和LoginIn可能對應著是變量為了避免變量為null或undefined的時候，在界面顯示出現(xiàn)bug隨意null和undefined在JSX中一般不會顯示在界面上*/}<div>{ isLogin ? 'LoginOut' : 'LoginIn' }</div>{/*邏輯運算符JSX中，會出現(xiàn)許多通過邏輯運算符來決定渲染內容的情況所以JSX中如果需要顯示的是boolean類型的時候，無論結果為true還是false其值都不會顯示，以避免出現(xiàn)顯示bug例如: isLogin && 'welcome'中 如果isLogin的值為false那么表達式的結果為false，此時在界面上顯示false明顯是不合理的*/}<div>{ isLogin && 'welcome' }</div>{/*函數調用JSX中可以進行函數的調用也可以使用一些方法，例如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的關鍵字，而JSX本質就是all in js所以為了避免HTML書寫和JS關鍵字沖突JSX為對應的HTML屬性起了別名class -> classNamefor -> htmlFor*/} <h2 className={`titile ${this.state.isActive && 'active'}`}>Lorem</h2>

react內聯(lián)樣式是花括號應用之一
style

{/*第一個大括號表示內部使用JS語法第二個大括號表示里面的值是一個對象style中的屬性值 如果是字符串需要加上引號因為是在對象中，如果不加引號，會被解析為對象 */} <h2 style={{color: '#fff',backgroundColor: 'skyblue','font-size': '20px' }}>Lorem</h2>

事件綁定

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

解決方法1 – 使用bind方法

{/*使用bind進行綁定的時候，可以返回一個擁有正確this指向的新函數但是如果在jsx中多次調用同樣函數的時候，需要多次重復使用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}// 我們可以在構造函數中 一次性對某個方法進行this的修正// 但是這就意味著所有的函數都需要在構造器中使用bind方法修正this指向// 而實際開發(fā)中，組件內部的函數是很多的，如果都在構造器中修正this指向// 必然會導致構造函數過于繁瑣，不利于維護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>{/* 綁定事件的時候，傳入的其實是對應事件的引用地址 */}<button onClick={ this.getCount }>click me</button></div>)}// 在定義函數的時候，使用class fields定義類的成員變量// 并且在定義函數的時候，使用箭頭函數// 而類中的方法，本質上都是通過類的實例去進行調用的// 所以類的成員變量的上層作用域是App類// 因此在這里， 我們可以獲取正確的this指向getCount = () => {console.log(this.state.count)} }

解決方法三 – 使用箭頭函數 — 推薦

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

參數傳遞

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

條件渲染
某些情況下，界面的內容會根據不同的情況顯示不同的內容，或者決定是否渲染某部分內容

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

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

具體參考簡書夏日夜的晚風博客，希望技術平臺都可以是開源平臺，供大家學習討論交流。
https://www.jianshu.com/p/a3cacda534e4

總結

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

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