小案例-jsx引入

在将jsx核心语法之前，先上来一个案例，复习一下上一讲组件化的内容，“电影列表”:
仍然是在html页面中开发：
step1 ：引入依赖（这里不讲了，见上一讲React精讲（一）原生react）
step2 ：渲染页面：ReactDOM.render(组件, 将挂载的对象)
step3 ：封装组件App:
创建App类，继承React.Component，创建构造方法，构造方法中要用this.state初始化下面要用到的数据movies。以上的准备工作都完成后，就准备在render函数中进行jsx的渲染了：
电影列表的难点在于我们怎么在jsx中将构造函数中创建的movies数组进行遍历展示：
①. 直接一个一个地写，将所有情况列出来，但如果电影列表有很多怎么办？所以这种方式直接抛弃
②. 定义一个数组liArray数组，在render中return之外对movies进行遍历，将遍历结果push到liArray中，然后在jsx中的{}中放入liArray，这是一个不错的想法：

jsx中书写：

③. 然而开发中我们更常用的是数组的高阶函数map来进行遍历，通过map映射出我们想要的结果：（且一般这种做映射，是无法用forEach的）
先介绍一下map：

<script>const names = ["abc", "cba", "nba", "mba"];// map(回调函数, 要绑定的this)， 第二个参数一般不用// 数组中有几个元素，回调函数就回调几次// 回调函数有三个参数：一般参数3就不放了，因为数组本身已经调用map函数了// 参数1：执行时的对应元素// 参数2：对应的下标值// 参数3：完整的数组对象const newNames = names.map((item, index, arr) => {return item + "000"})console.log(newNames);
</script>

【小贴士】为什么map是高阶函数？因为它的第一个参数是一个函数，符合高阶函数的定义

将map应用到本题中进行遍历：

【小结】
jsx中遍历外部数据列表的方式：
①. for-of遍历，liArrar.push(数据)，然后jsx中 {liArray} 展示
②. map函数遍历：数组.map((item) => { return 映射后的结果 })
③. vscode小技巧：生成代码块的小技巧，File -> preference -> user snippet中可以创建属于自己的代码段（利用键-值对来访问），且快速生成代码段的网站：snippet generator。生成之后，在页面中打出相应的字段就可以弹出整个想要的代码段了！！！

认识jsx

先上一段代码：

<script type="text/babel">
// jsx语法
const Ele = <h1>Hello World</h1>
</script>

没接触过react但学习过js的同学可能会非常疑惑，上面的赋值是在做什么呢？这个“字符串” < h1 >Hello World</ h1> 外面不放双引号也可以做赋值操作吗？
其实啊，这是jsx的语法，上面这一赋值语句只有在特定场景下才能使用，细心的同学应该发现了，script标签中有一个type属性，值为text/babel，有了babel这一翻译，我们才能合法地使用上面的赋值语句。

jsx到底是个什么呢？

JSX是一种JavaScript的语法扩展( eXtension) ，它用于描述我们的UI界面,并且其可以和avaScript融合在一起使用;
它不同于Vue中的模块语法,你不需要专门学习模块语法中的一些指令(比如v-for. v-if. v-else. v-bind ) ，实际上从上面的案例我们也可以看出它就是原生的html语句而已；
在使用该jsx时，从“电影列表”的案例中也可以看出，你就把其当做一个“值”来使用即可，它可以被赋给其他变量，也可以被用来返回 …

但这里把html和js混在一起，好像有所违背“结构不和渲染混在一起的”原则，为什么react要这样做呢？
因为react有一个思想：all in js，所有代码都可以在js中书写，包括html和css（这个后面会讲）等。这样做是因为react认为js代码和UI逻辑是具有内在耦合性的，所以react没有讲各种不同的标记（html，css，js）分离到不同的文件中（vue分离了），而是将它们一同放到了一个组件当中！

jsx书写规范

1、 最外层只能有一个根元素；
2、 为了良好的可读性，jsx外层最好**用一个小括号()**包起来，当然你可以不用，但如果不用就要把所有的jsx都放在同一行；
3、 jsx中可以用html的单标签，但必须以/>结尾

应用jsx必须掌握的

嵌入数据

1、 jsx中的注释：{/* 我是注释 */}
2、 jsx的花括号中能够/不能显示的数据：

constructor(props) {super(props);this.state = {// 1. 在{}中可以正常显示的内容name: "why", // stringage: 18, // numbernames: ["abc", "cba", "nba"], // Array// 2. 在{}中不显示的test1: null,test2: undefined, test3: false}}
// jsx代码块
render() {return ( <div><h2>{this.state.name}</h2><h2>{this.state.age}</h2><h2>{this.state.names}</h2><h2>{this.state.test1}</h2><h2>{this.state.test2}</h2><h2>{this.state.test3}</h2>{/* test1, test2, test3都没有显示出来*/}</div>)
}

从上述例子当中，我们可以看到string, number和Array类型的数据都按照我们想要的结果显示了出来，但null，undefined和boolean类型的值都没有显示，为什么react要这样设计？

比如有以下场景：
①. null，其中flag为布尔类型，我们希望当flag为true时，输出“你好啊”；为false时，什么也不输出，但若null会输出，那这就是一个bug了！

// jsx中：
<h2>{this.state.flag ? "你好啊" : null}</h2>

②. boolean，其中flag为布尔类型。我们希望的效果是flag为true则只输出“你好啊”，若布尔类型会输出，那么页面上还会多一个布尔类型的数据，会很奇怪！
[原理] 这里flag为true会输出内容，为false不输出内容的原因：逻辑与&&中一个条件若不成立，则后面的条件也不会判断了，直接输出false，jsx中则就什么都不输出；若前面的条件均成立，则会把&&表达式中最后一个元素的值作为整个表达式的值输出（即使是多个&&也一样，只会输出最后一个的值）

<h2>{this.state.flag && "你好啊"}</h2>

undefined也是类似的 …
当然，如果你真的想将这几个类型的数据输出，就可以将它们转为字符串形式，方法有：强转string()，+""和toString()等，不过转为了字符串形式其实也没有什么意义了。

3、这里我们最想讲的是在this.state中定义的对象不能直接通过{this.state.对象}来展示，" is not valid as a React child "，想想为什么？从reactDOM渲染的角度思考

4、 jsx中的花括号还可以放置表达式，其实你就可以将作为一个js的运行区域！！！拥有这一思想非常重要
其中可以放置运算符表达式，三元运算符，甚至还可以调用函数：

return (
<h2>{this.getFullName()}</h2> 
)
getName(){return this.state.name;
}

【注1】前面没有搞懂的同学可能会问，这里调用函数"不用绑定this"吗？
你要搞清一个问题，上一讲中onClick={this.state.btnClick.bind(this)}要绑定this是因为这里是react内部去调用（更准确是回调）该函数的，react在内部调用时并不知道this该绑定谁btnClick.call(undefined)。但现在是我们自己来调用啊（注意一下函数后面的括号）！！！this.getFullName() 这一定确定就是绑定在我们自己的class类对象上，所以就不需要所谓的绑定！
【补】.bind(this)是会生成一个新的函数的！
 

绑定属性

1、 花括号的应用场景非常广泛，它也可以用来绑定html标签中的属性：（属性绑定）

constructor(props) {super(props);this.state = {title: "标题"}}render() {return (<div>{/* 当把鼠标放在“我是标题”上面时，就会显示“标题”两个字 */}<h2 title={this.state.title}>我是标题</h2></div>);}

这一场景最常见的应用是< img src= {this.state.imgUrl} />，这样图片地址就不至于写死了！说到图片的加载，这里又来了一个需求：（当然，也和数据绑定有关）

比如一张图片很大，但显示的时候，我们不需要那么大，如果加载完这张很大的图片再用css限制其宽度这样会很耗性能，一般的方式是在该图片额url地址上做限制，这样就会在加载时加载一张较小的图片了，如何网易云音乐就是这样处理的：
https://p1.music.126.net/RKdf_w3DdPmtWpqvP82J7Q==/109951166449305021.jpg?param=100y100
其中问号后面的param就是限制宽度的参数，那么现在在react中我们要动态地在url后添加限制参数怎么做呢？（这其实就是运行js代码的例子而已）

 render() {const { title, urlPic } = this.statereturn (<div><h2 title={this.state.title}>我是标题</h2><img src={this.getSizeImg(urlPic, 140)}/></div>);
}
getSizeImg(img, size) {return img + `?param=${size}y${size}` 、、 z
}

当然，上面这种开发方式是不专业的，因为可能很多组件都会用到图片的处理函数，所以要把该getSizeImg函数封装到一个模块当中去！！！
【注2.1】花括号的应用还很多，其实本质是因为js的运行应用有很多而已！！
 
2、 jsx中的html与原生的html标签还是略有不同的，因为该html标签是混在js书写的，所以可能html标签中的内容会与js中的关键字相同，比如：html标签的class属性和js的类关键字，html的label中的for与js的for循环重合,etc…
根据react中的"all in js"的原则，肯定是js优先，所以jsx中一些html标签的名字要修改：
比如class要修改为className，label的for要修改成htmlFor：

(<div className="box title">我是div元素</div><label htmlFor=""></label>
)

【注：绑定class】说到className，我们这里又想到了一个需求，即className中的class的数量有些情况是不确定的，这种情况怎么搞？下面代码中flag为布尔型，active为一个class：

<div className={"box title" + {flag ? "active" : ""}}>我是标题</div>
// js运行区嵌套js运行区

 
3、 jsx中如何放置style的内联css样式，style很特殊，它甚至不允许通过""的形式向其中放css代码，必须按照jsx规定好的方式！（这与jsx的渲染方式有关，后面会讲述！），具体方式：
step1：style后创建一个js运行区域
step2：在js运行区中放一个对象，该对中的各种属性就是css的样式了。当然，如果属性的键是值就要打上双引号才行，因为它们是属性值，且最终会以字符串的形式去解析。如果是变量，就不用了，引擎会去上面去寻找这一变量。

<div style={{color: "red"}}>我是标题</div>
// 红色的标题

【注】在利用键值对的方式书写css样式时，在jsx还有一些问题，比如原来的html中键font-size在jsx中就不能这样用了，以前用破折号连接的font与size在jsx中的连接方式是“驼峰命名”：
fontSize
 

事件绑定

事件绑定之this处理

对于jsx中的事件绑定，之前我们已经提过很多次了，事件绑定最主要的问题就是事件绑定的函数不是我们自己主动调用的，而是react内部调用的，在调用时如果你不明确函数的this绑定，react就更不知道了，只能将this赋为undefined。
要实现jsx中onClick事件绑定，其实不只有.bind(this)这种方案，我们也不推荐这种方案，下面来看几种事件绑定的方式：

① bind显式绑定this

这是最熟悉的方案，当然下面的代码做了一个优化，就是将绑定操作放在了构造函数中，因为可能该函数会被使用很多次，若将其在构造函数中就绑定好，下面使用时就不用每个后面都放个.bind(this)了：

构造函数中绑定好：

constructor(props) {super(props);this.state = {message: 'Hello World',}this.btnClick = this.btnClick.bind(this) // 将对象的this绑定到btnClick函数上
}

jsx中调用：

 return (<div><button onClick={this.btnClick}>You are good!</button>{/*看这里onClick中就没有绑定this了 */}</div>
);

② 定义函数时就使用箭头函数

es6的箭头函数语法糖是好东西啊，与普通函数相比，它有个特点：箭头函数中永远不绑定this。若在其中使用this，那也不是它自己的，而是引擎会向外冒泡寻找该箭头函数外部运行环境的this。所以在本例中，函数的this一定绑定在该class类上（其外部运行环境）
在作为事件绑定时，我们这里会把箭头函数作为类的属性的值（es6中给对象添加属性的方式），然后在onClick中放置该属性：

jsx的花括号中放置该属性：

return (<div><button onClick={this.btnClick}>You are good!</button></div>
);

将箭头函数赋给该属性：

 btnClick = () => {console.log(this.state.message);
}

③ onClick中直接传入一个箭头函数，箭头函数中放置需要执行的函数（推荐）

第二种方式其实已经很好了，就是有一个问题它定义的函数有点别扭，它在onClick传入的是类的属性，只是属性值是一个函数而已。第三种方案就很好了，箭头函数的{}是js代码的运行区域，所以会对其中放置的函数进行执行。

箭头函数的函数体中调用类中定义的函数：

return (<div><button onClick={() => { this.btnClick() }}>You are good!</button></div>
);

像平常一样在类中定义相应的函数：

btnClick() {console.log(this.state.message);
}

【注】为什么推荐这种方式？
首先，这种方式因为采用了箭头函数，箭头函数中的this就是外面运行环境的this，不会存在丢失的问题；
最重要的是，这种方式更符合我们调用函数的方式。比如我们若想往运行函数中传入参数，就非常方便，可以直接写进行，和普通的函数调用没有差别：（比如我们要想事件绑定函数中传入name和age变量，直接传就可以了）

 <button onClick={() => { this.btnClick(name, age) }}>You are good!</button>

 

事件绑定之参数传递

其实可以不讲参数传递，上面已经说了，在箭头函数中执行函数最适合参数传递了。这里只是有些“特殊情况”（其实也不特殊，只是参数的意义比较特殊），所以把“参数传递”单独提出来讲一下。
在绑定事件之后，比如现在我们点击按钮，想要获得点击时的一些信息怎么办？

先分析一个点击按钮的过程：点击按钮时会触发一个事件，随后这个事件会被浏览器封装成一个事件对象event，该对象中会有很多有用的属性。

在原生js中，我们会采用addEventListener进行监听，在回调函数中拿到这一事件对象event，但在react的onClick绑定事件中要怎么拿到这个参数呢？（这就是一个参数传递的例子）

现在react中怎么办？其实上面事件绑定中已经提到，方案3是一个很好的实践，它在参数传递时与其他事件绑定形式相比有着无可比拟的优越性。

①. 先不说去获取点击事件对象event，就比如普通的参数传递，还是电影链表的例子，我们可以在箭头函数体中的函数执行中()规定我们自己想要的参数：

电影列表：

constructor(props) {super(props);this.state = {movies: ["movie1", "movie2", "movie3", "movie4"]}
}

点击事件，下面是jsx部分：我们在this.liClick(item, index)中就规定了我们想要的参数

<ul>{this.state.movies.map((item, index) => {return <li onClick={() => { this.liClick(item, index) }}>{item}</li>})}    
</ul>

liClick函数定义。在定义liClick函数时就定义相应的参数进行接收传入的需要的值

liClick(item, index) {console.log("按钮发生了点击", item, index);
}

如果不是在箭头函数体中执行相应的函数的这种事件绑定方式，我们自己是无法规定要接收什么参数的！！！

②. 现在去获取event事件对象：
这里的要获取event对象，直接在this.liClick(item, index, e)是获取不到的，因为这是由react内部提供的，react在回调时是会将event传给箭头函数的，所以若我们自定义的函数要获取event，必须要箭头函数先接收一下，如下：

return <li onClick={(e) => { this.liClick(item, index, e) }}>{item}</li>

然后liClick多定义一个参数接收：

liClick(item, index, e) {console.log("按钮发生了点击", item, index, e);
}

Maybe 你会想问，这个e是谁给的呢？答案很明显，是react在调用事件函数时给的，方式类似于定义一个接收箭头函数的变量a，然后a.call(undefined, event)，当然，对于箭头函数而言，你是无法绑定this的，箭头函数根本没有this，所以你无论call什么都没用，但参数还是传给了箭头函数的，然后箭头函数内部的函数又使用了给参数

【注1】当然，上面的代码可以优化一下，当箭头函数只有一个参数时，括号可以省略；且当函数体中只有一个语句时，也可以把花括号省略掉：

return <li onClick={e => this.liClick(item, index, e) }>{item}</li>

【注2：一个代码习惯】比如在上面li的标签可能除了onClick属性外，可能还有className等，这样所有代码都写在一行就太长了，而且可读性也不佳，所以建议：在一行代码很长的时候，return后面可以放一个括号，这样允许内部代码换行

return (
<li 
onClick={...}
className=...
style={{...}}
...
>
{item}
</li>
)

这样代码就很清晰了！
【注3：箭头函数的一点补充】上面箭头函数的简略情况，如e => this.liClick(e)，若箭头函数的函数体中只有一句话，且函数体去掉了花括号，那么其实它是会return this.liClick(e)的，对js了解的同学应该知道函数内部返回一个函数，这是形成了一个闭包的…

 
 

react条件渲染 - 控制怎么渲染

标题很绕，意思就是在jsx中有条件的将相应的内容进行渲染输出，方式和js一样（不用去特殊学什么语法），可以用到if-else，三元运算符和逻辑与&&,etc
在条件渲染中，我们重点想讲的是条件渲染中；

实现类似vue中vue-show的功能

上面所说的三种条件判断进行渲染的方式，比如：要实现一个需求，即登录和未登录状态是不一样的，要怎么办？

一般来说，就定义一个boolean类型的标志变量isLogin，若点击了登录按钮，怎boolean为true，否则为false，显示字样上则表现为：
<h2>{ isLogin ? "你好啊" : null }</h2>

但这样，若有一个需求，要频繁地变换这两个状态，那么按上面这个代码，就会去频繁地操作DOM树，很麻烦。Vue中中给了v-show这一方案，它主要通过css中display的方式去对相关内容进行展示，这样就不会去操作DOM结构，其实啊，在react中，我们也可以自己去实现：

<h2 style={{display: (isLogin ? "block" : "none")}}>你好啊</h2>

设置相关的行内样式即可，登录状态就block显示出来，否则就none！
当然，如果情况太多了，用if-else还是会方便一些的！
 

react列表遍历 - 渲染数据的方式

map与forEach

其实本章最开始电影列表的例子就展示了如何在jsx中对数组进行遍历，我们提到了利用数组的高阶函数map。这时有同学会说了，我们可以用在jsx中用forEach来遍历吗？
答案是不能直接用。

背景：JSX语法最终是要return返回html标签或对应内容的

However，forEach函数是没有返回值的，map则是会返回的，所以map可以直接在jsx中使用
（更重要的是，forEach是在原数组上修改，而map则是映射为新的数组元素）。

当然，你用forEach也行，不过要有一定的波折：要把item push到一个数组当中才能用！

 render(){const elements = []; // 用于存新产生的jsx的内容arr.forEach((item)=>{elements.push(<li>{item}</li>)});return( // 这里才是正式的jsx的内容<div>{elements}</div>)}

 

列表数据过滤 - filter

我们想要有选择有条件地输出数组中的元素，怎么办？
很简单，数组的filter方法，和map方法非常类似，函数参数都是一样的（也是有返回值的）。但由于它只做过滤，不做映射，所以它的函数体中是放过滤要求的，且返回值为为布尔类型，如果为true，那么该元素可以返回，可以输出；否则不输出：

筛选出偶数：

const nums = [110, 123, 130, 220]
const nums1 = nums.filter((item, index) => item % 2 == 0)

jsx中：

<div>{this.state.arr.filter(item => item % 2 == 0).map(item => <li>{item}</li>)}
</div>

列表数据截取

场景为比如总共目前有30条数据，但页面上只展示4个，那么就要截取前四个数据来进行展示，这一功能也用到的非常多，使用slice方法，该函数的参数为起始位置和终止位置的后一位：

<div>{this.state.arr.slice(0, 4).map(item => <li>{item}</li>)}
</div>

【补充】js中有关数组的几个混淆的方法：

slice：开始位置下标，结束的下标（左闭右开：和python的range很像啊）
split：根据你规定的符号切割成一个新的数组
splice：第一个参数为第一项位置，第二个参数为要删除几个，且会改变原数组的内容