ReactP2_两个简单案例（列表展示和计数器）_JSX核心语法

两个简单案例列表展示计数器 JSX核心语法jsx语法关于注释JSX嵌入数据JSX嵌入表达式 这边是react学习笔记，期间加入了大量自己的理解，用于加强印象，若有错误之处还请多多指出

开始有一个ES6的class讲解，个人学过好些后端OOP语言，这一块听的比较随意，也不做笔记

两个简单案例

列表展示

假设现在一个App类的构造器提供了以下数据结构，现在要求在网页中使用ul>li将movies数组中的每一条信息展示出来

constructor() { super(); this.state = { movies: ["大话西游", "盗梦空间", "星际穿越", "流浪地球"] } }

在这边提供两种展示方法：

第一种：

render() { const liArray = [];//创建空数组 for (let movie of this.state.movies) { liArray.push(<li>{movie}</li>);//遍历压入数组 } return ( <div> {/*第一种展示方式*/} <h2>电影列表</h2> <ul> {liArray}//展示整个数组内容 </ul> </div> ) }

该种方法通过创建空数组将所有的信息一次遍历后利用push方法压入数组中，再一次性展示出来

创建空数组将所有的信息一次遍历后利用push方法压入数组中，再一次性展示出来

第二种

render() { return ( <div> {/*第二种展示方式*/} <h2>电影列表</h2> <ul> { this.state.movies.map((item) => { return <li>{item}</li> }) } </ul> </div> ) }

该种方法通过使用函数map，对数组中的每一项进遍历，其中的每一项内容标记为item，随后以li包裹的方式返回，得到一个被li包裹的完整框架以达成展示的目的

针对第二个方法中出现的map函数进行一个简单的介绍，首先map函数本身具备两个参数 [array].map ( 参数1，参数2) - 参数1 ————— 回调函数，会根据调用对象里面的元素数量来确定回调函数的执行次数 - 参数2 ————— 使用的比较少，主要是给前面的回调函数绑定this 如果给第一个参数一个箭头函数，如下 在函数中具有三个参数， - 参数1: item ———— 执行时的对应元素 - 参数2: index ———— 执行元素对应的下标值 - 参数3: arr ———— 完整的数组对象 执行完成后，每个经过操作执行的元素会被存放入一个新定义的数组newArray中 const newArray = array.map((item,index,arr)=>{ return item//此处可以对item进行操作 })

计数器

class App extends React.Component { constructor(props) { super(props); this.state = { counter: 0 } } render() { return ( <div> <h2>当前计数: {this.state.counter}</h2> <button onClick={this.increment.bind(this)}>+1</button> <button onClick={this.decrement.bind(this)}>-1</button> <img src="" alt=""/> </div> ) } increment() { this.setState({ counter: this.state.counter + 1 }) } decrement() { this.setState({ counter: this.state.counter - 1 }) } }

再次强调一下，方法中如果里面需要调用到this来指向组件中的state的数据并对其进行操作的话，必须在方法的后面添加绑定指针bind(this)来提供指向组件的指针。

onClick={this.decrement.bind(this)}

因为侦听单击事件的回调函数是被react调用到内部去进行执行的，在调用的环境中，回调函数中的this是undefined，所以无法找到组件中的state

JSX核心语法

jsx语法

<script type="text/babel"> // jsx语法 const element = <h2>Hello World</h2>;//此处代码在js中执行是不被允许的，会报错 ReactDOM.render(element, document.getElementById("app")); </script>

JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法

此处type="text/babel"是调用jsx语法的标志

只有通过text/babel标记过的代码，才可以进行类似上面使用html标签对变量进行赋值的操作

它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用

书写规范：

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）

为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写

JSX中的标签可以是单标签，也可以是双标签

注意：如果是单标签，必须以/>结尾

个人理解就是html和javascript可以混着写的意思

关于注释

render() { return ( <div> {/* 我是一段注释 */} <h2>Hello World</h2> </div> ) } 如果需要添加注释，首先是需要在中间使用大括号{ }，来标记出来中间使用的是JavaScript代码，而后在为了注释的方便（可以换行）而选用块注释的语法来添加注释

两种错误的注释方式

return ( <div> //这是错误的注释 <h2>Hello World</h2> </div> ) 如果是直接在html相关的代码中间插入//来注释是无效的，因为//会被当做是文本而非常尴尬的显示在页面中 return ( <div> <!--这是错误的注释-->//直接就报错了 <h2>Hello World</h2> </div> ) 如果是使用html代码中<!— --->类型的格式来进行注释，编译器会直接语法报错，这归根结底是写js代码的地方

JSX嵌入数据

constructor(props) { super(props); this.state = { // 1.在{}中可以正常显示显示的内容 name: "why", // String age: 18, // Number names: ["abc", "cba", "nba"], // Array } } render() { return ( <div> <h2>{this.state.name}</h2> <h2>{this.state.age}</h2> <h2>{this.state.names}</h2> </div> ) } 可以在{}中显示的内容有三种，String，Number，Array constructor(props) { super(props); this.state = { // 2.在{}中不能显示(忽略) test1: null, // null test2: undefined, // undefined test3: true, // Boolean flag: true, } } render() { return ( <div> <h2>{this.state.test1 + ""}</h2> <h2>{this.state.test2 + ""}</h2> <h2>{this.state.test3.toString()}</h2> <h2>{this.state.flag ? "你好啊": null}</h2> </div> ) } 无法在{ }中显示的内容有null，undefined，boolean(但是可以通过toString( )方法来展示boolean) constructor(props) { super(props); this.state = { // 3.对象不能作为jsx的子类 friend: { name: "kobe", age: 40 } } } render() { return ( <div> <h2>{this.state.friend}</h2> </div> ) } 对象不能作为jsx的子类，如果企图在网页中展示子类，浏览器会直接报错

JSX嵌入表达式

constructor(props) { super(props); this.state = { str1: "大风车", str2: "吱呀吱溜溜地转", isTrue: false } } render() { const { str1, str2, isTrue } = this.state; return ( <div> {/*1.运算符表达式*/} <h2>{ str1+ " " + str2}</h2> <h2>{10 * 20}</h2> {/*2.三元表达式*/} <h2>{ isTrue ? "是": "否" }</h2> {/*3.进行函数调用*/} <h2>{this.getFullStr()}</h2> </div> ) } getFullStr() { return this.state.str1+ " " + this.state.str2; } }

总结：

当变量是Number、String、Array类型时，可以直接显示

当变量是null、undefined、Boolean类型时，内容为空

如果希望可以显示null、undefined、Boolean，那么需要转成字符串，比如toString方法、和空字符串拼接，String(变量)等方式；

对象类型不能作为子元素（not valid as a React child）

JSX可以嵌入表达式，比如运算表达式、三元运算符、执行一个函数

. . . . 感谢coderwhy(王红元老师)的课程

最后爱生活，爱猪猪