上一篇我们学习了ES6语法的面向对象的基础，本篇我们来学习ES6面向对象的使用。
我们通过React来讲解ES6面向对象的使用，因为React是强依赖于ES6的面向对象的。
React是一个用于构建用户UI界面的JAVASCRIPT库，通过对DOM的模拟，最大限度地减少与DOM的交互。
React有以下特点：
1、组件化---class
2、强依赖于JSX（JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，需要用JS编译器编译，最常用的是babel，用来转译 ECMAScript 2015+ 至可兼容浏览器的版本）
没有学过React的童鞋也不用担心，我们只是通过React最基础的内容来学习面向对象。
首先创建一个Html文档，引入React的依赖：
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
</body>
</html>实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：
● react.min.js - React 的核心库
● react-dom.min.js - 提供与 DOM 相关的功能
● babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
然后我们使用React的render方法，将一段Html代码渲染到一个Div组件上：
<!DOCTYPE html>
<html>
<head>
<title>TEST ES6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script type="text/babel">
window.onload=function(){
let oDiv=document.getElementById("div1");
ReactDOM.render(//渲染方法
<span>123</span>,//JSX语法，创建一个HTML标签
oDiv
);
}
</script>
</body>
</html>效果：
这个例子要说明什么呢？我们下面要通过类自己写个组件，让ReactReact渲染我们的组件。
React是一个基于组件开发的框架，其所谓的“组件”其实就是各种Class的类，例如我们要写一个组件，其实就是创建一个Class，这个类可能有自己的属性、方法、生命周期等等，React的所有组件都是继承了React.Component类，下面我们写例子：
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){//必须实现父类的render方法，因为所有组件都需要渲染
return <li>{this.props.str}</li>;
}
}
window.onload=function(){
let oDiv=document.getElementById("div1");
ReactDOM.render(//渲染方法
<ul>
<Item str="123"></Item>
<Item str="456"></Item>
</ul>,//JSX语法，创建一个HTML标签
oDiv
);
}
</script>我们这里编写了一个Item组件，继承了React.Component类，实现了父类的render渲染方法，渲染出“<li>参数</li>”的效果（“this.props.str”可以获取参数值）：
此时我们如果还想再完善一些，可以编写另一个组件，将其包装成一个可以显示列表的类：
<script type="text/babel">
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){//必须实现父类的render方法，因为所有组件都需要渲染
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){//必须实现父类的render方法，因为所有组件都需要渲染
let aItems = [];
for(let i=0;i<this.props.arr.length;i++){
aItems.push(<Item str={this.props.arr[i]}></Item>);
}
return <ul>{aItems}</ul>;
}
}
window.onload=function(){
let oDiv=document.getElementById("div1");
ReactDOM.render(//渲染方法
<List arr={['123','456','789']}></List>,//JSX语法，创建一个HTML标签
oDiv
);
}
</script>我们这里编写了一个List类，该类可以引用之前的Item类去渲染，这里接收了一个数组，然后遍历后组装成一个列表的Html，渲染出来显示：
List类将“['123','456','789']”的数组，转换成了以下的效果：
<Item str='123'></Item>
<Item str='456'></Item>
<Item str='789'></Item>再简单一些，我们可以使用arr的map函数（ES6的数组函数），将数组中的元素，转换成需要的效果：
render(){
// let aItems = [];
// for(let i=0;i<this.props.arr.length;i++){
// aItems.push(<Item str={this.props.arr[i]}></Item>);
// }
let aItems = this.props.arr.map(a=><Item str={a}></Item>)
return <ul>{aItems}</ul>;
}上面就通过React的一些特性，我们完成了两个自定义类的编写，了解了类的大致使用方式，顺便还用了数组的map函数。
以上就是面向对象的一些实际应用，下一篇我们来讲解ES6对于json新增的功能。
参考：深入解读ES6系列视频教程（kaikeba.com提供）
转载请注明出处：https://blog.csdn.net/acmman/article/details/115219826