React案例知识点解读 【ES6】新特性用法

前面有写过一篇React的实战小案例 React项目 实战案例 实用推荐收藏-CSDN博客，有同学对里面的部分知识点有疑问，在这里专门出一片实战部分知识点解读，以方便更好的理解。

欢迎参考以及交流，谢谢。

目录

1.const 关键字 

2.箭头函数

3.es6新特性扩展运算符 。。。

4.react表单 使用受控组件的方式提交数据

5.三元表达式  条件操作符 （？：）

---

1.const 关键字 

cosnt 是es6新增的一个关键字，用于声明一个只读变量。

定义一个username变量  

//es6的简写形式

const {username} = this.props;

//等同于下面的代码

const username = this.props.username;

所以react案例中const这句话 

相当于

const shop = this.props.data.shop;
const product = this.props.data.product;
const price = this.props.data.price;
const picture = this.props.data.picture;
const ifCommented = this.props.data.ifCommented;

//上面的代码用es6新特性可以简写为
const { shop,product,price,picture,ifCommented} = this.props.data;

2.箭头函数

箭头函数是es6中最重要的一个新特性，简单的理解可以是简化代码，即当函数只有一个参数时可以省略（），当函数只有一个return时，可以省略{}、return。

案例中大部分函数都是这样写的

上面的函数等同于这样写

function handleOpenEditArea () {  
    editing = true;    
}

3.es6新特性扩展运算符 。。。

es6的扩展运算符，它的语法很简单，使用三个点号表示“...”。可以将一个数组转为用逗号分隔的参数序列。

一个简答的案例

//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

react案例中是这样用的：这里的...item 就是 this.state.data遍历的一个数组数据，newData数据是用户提交评论之后数据保存到服务器更新之后的数据重新赋值给 data，也就是代码中：this.setState({data:newData}) 部分。

而this.state.data数据就是模拟从服务器获取的mock数据。下面的代码：

this.setState({data}) 
//等同于下面代码，键和值一样时，可以省略简写成上面的代码
this.setState({data:data})  

4.react表单 使用受控组件的方式提交数据

这里评价输入框用户修改数据，触发handleCommentChange这个方法state发生变化，组件重新被渲染，人的人方法重新执行，<textarea/> 中的value的值{this.state.comment}重新设置成新的值。

生疏的同学可以参考这篇react基础知识回顾：React基础知识 精简全面 推荐-CSDN博客

5.三元表达式  条件操作符 （？：）

条件操作符是JavaScript唯一一个三元操作符。在代码中一般是这样的

x > 0 ? x : -x //x的绝对值 

在react案例中有多处使用，我们拿其中一个评价按钮如何用表达式来控制显示内容来看：这里我们用ifCommented 的值来作为条件，如果ifCommented 为true 说明订单已经进行评价，我们就显示已评价，否则ifCommented为false，就显示评价按钮。

条件操作符的操作数可以是任意类型。即案例中的ifCommented。

后续会继续补充.....，也欢迎大家评论区交流补充。