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中需要展示数据状态，在某些状态发生改变时，又需要改变UI

他们之间是密不可分，所以React没有讲标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件 (Component)。
书写规范

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() {// 对象的解构，可以使用常量来进行接收// 因为每一次界面刷新的时候，其都会重新执行一遍render函数// 也就是会生成一个新的函数作用域，因此解构出的变量可以使用常量来进行接收const { firstName, lastName, isLogin } = this.statereturn (// 虽然JSX可以使用Fragment进行包裹(也就是使用<></>来进行包裹)// 但是Fragment只能在脚手架中使用，在CDN引入的时候无法使用<div>{/* JSX中可以书写合法的JS表达式 */}<div>{ firstName + ' ' + lastName }</div>{/*JSX中可以编写三目运算符在实际开发中，LoginOut和LoginIn可能对应着是变量为了避免变量为null或undefined的时候，在界面显示出现bug随意null和undefined在JSX中一般不会显示在界面上*/}<div>{ isLogin ? 'LoginOut' : 'LoginIn' }</div>{/*逻辑运算符JSX中，会出现许多通过逻辑运算符来决定渲染内容的情况所以JSX中如果需要显示的是boolean类型的时候，无论结果为true还是false其值都不会显示，以避免出现显示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内联样式是花括号应用之一
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在执行传入的原生事件回调的时候，使用了`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指向// 而实际开发中，组件内部的函数是很多的，如果都在构造器中修正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. 在箭头函数的执行体中，是去调用我们实际需要执行的函数，此时不是引用地址，而是具体的函数调用所以使用这种方法进行事件的绑定 便于我们进行函数参数的传递*/}<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 />{/* 通过逻辑运算符来实现条件分支的判断 */}{ this.state.isLogin && <p>您已经成功登录</p> }</div>)}// 和渲染UI无关，但是和业务逻辑有关的函数，写在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函数来帮助我们实现列表渲染

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大括号的用法相关推荐

c语言中类似于大括号的符号,大括号符号 c语言大括号的用法
大括号{}出现在shell脚本的各个角落,其用法也各有不同.同音多义字在汉语中最容易让人混淆,而大括号也正是bash语言中的"同音多义字".下面小编就为大家介绍c语言大括号的用法. ...
react useCallback的用法
useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与u ...
React Hook的用法: State + Effect(一)
React Hook 简述 React Hook 是React 16.8 这个版本新增的一个特性.在此之前我们编写React组件一般大多数都是用 class组件,而非函数组件,因为函数组件不具有cla ...
php中{}大括号的用法总结
在PHP中,大括号"{}"可以起到如下作用: 1.将多个独立语句合并为一个复合语句,例如 if ... else ...中经常如此使用 2.在变量间接引用中进行定界,避免歧义.例如 ...
【React】forwardRef 用法
文章目录基本用法基本用法 forwardRef:允许你的组件使用 ref 将一个 DOM 节点暴露给父组件. import { forwardRef } from 'react';const My ...
c语言指针大括号的用法,c语言大括号的用法
大括号{}出现在shell脚本的各个角落,其用法也各有不同.同音多义字在汉语中最容易让人混淆,而大括号也正是bash语言中的"同音多义字".下面小编就为大家介绍. {}第一种用法, ...
linux中shell的小括号、大括号的用法区别
Linux中小括号()和大括号{}都是对其中的一串命令进行执行,但有一定的区别,其区别如下: 1 小括号() ①命令组.括号中的命令新开一个子shell程序,括号中的变量为本地变量 ,不能够在脚本其他 ...
React.memo的用法
在线示例 https://codesandbox.io/s/myp00yr1xx?fontsize=14/react-memo 在使用function 作为statless组件的时候,我们通常是这样的 ...
React Hook的用法: Contex + Reducer(二)
React Hook 简述通过上篇文章我们知道使用 State Hook 和 Effect Hook 可以让函数组件也能够具有自己的状态和在组件的各个阶段提供钩子暴露给开发者使用(点击我查看 Sta ...

react大括号的用法

react里面为什么要使用大括号{}：

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

绑定属性

react大括号的用法相关推荐

最新文章

热门文章