- A+
JSX语法
JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；
它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；
它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）；
const element=<h2>{message}</h2>
? JSX的书写规范：
JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment）；
为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
JSX中的标签可以是单标签，也可以是双标签；
✓ 注意：如果是单标签，必须以/>结尾；
jsx里面的注释
{/* */}
◼ JSX嵌入变量作为子元素
情况一：当变量是Number、String、Array类型时，可以直接显示
情况二：当变量是null、undefined、Boolean类型时，内容为空；
✓ 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
✓ 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
情况三：Object对象类型不能作为子元素（not valid as a React child）
◼ JSX嵌入表达式
运算表达式
三元运算符
执行一个函数
<h2>{10+20}</h2> <h2>{age>=18? "成年人":"未成年人"}</h2> const liels=movies.map(movie=><li>{movie}</li>) getmoviels(){ const liels=this.state.movies.map(movie=><li>{movie}</li>) return liels } <h2>{this.getmoviels()}</h2>
事件绑定
//this绑定的三种方法 1、this.btnclick=this.btnclick.bind(this) 2、btn3click=()=>{ console.log(this) } 3、先定义函数 btn3click(){ console.log(this) } <button onClick={()=>this.btn3click()}>1</button>//使用隐式绑定
多个参数传递
btnclick(event,name,age){ console.log("btnclick",event,this) console.log(name,age) } //第一种 <button onClick={this.btnclick.bind(this,"boke",20)}>2</button> //第二种 <button onClick={(event)=>this.btnclick(event,"grb",21)}>3</button>
条件渲染
在vue中，我们会通过指令来控制：比如v-if、v-show；
在React中，所有的条件判断都和普通的JavaScript代码一致；
◼ 常见的条件渲染的方式有哪些呢？
◼ 方式一：条件判断语句
适合逻辑较多的情况
◼ 方式二：三元运算符
适合逻辑比较简单
◼ 方式三：与运算符&&
适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；
◼ v-show的效果
主要是控制display属性是否为none
const {isready}=this.state let showelent=null if(isready){ showelent= <h2>开始</h2> }else{ showelent= <h1>结束</h1> } return( <div> {showelent} </div> )
