面向对象应用——React
特点：
1、组件化(模块化) --- class（一个组件就是一个class）
2、强依赖与JSX (JSX==babel==browser.js 是JS的扩展版)
3、三个库：
1)react.js ----> React 的核心库
2)react-dom.js ----> 提供与 DOM 相关的功能
3)babel.min.js ----> Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平
4)如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
<script type="text/babel">
// ...
</script>
</head>
<body>
<!-- ... -->
</body>
</html>
1、React最基础的东西
window.onload = function (){
let oDiv = document.getElementById('div1');
ReactDOM.render( //JSX
<span>124</span>,
oDiv
);
};
2、React组件
1）组件渲染1
class Test extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <span>span123</span>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<Test></Test>,
oDiv
);
};
2）组件渲染2 —— {表达式}
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
// 在 JSX 当中你可以插入 JavaScript 的表达式，表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹。
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<ul>
<Item str='111'></Item>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>,
oDiv);
};
3)组件渲染3 —— 组件套组件
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <ul>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<List></List>,
oDiv);
};
4)组件渲染4 —— React传参
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
render(){
alert(this.props.arr[0]);
return <ul>
<Item str='111'></Item>
<Item str='111'></Item>
</ul>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
// <List arr="['bbb','ppp','ddd']"></List> // 输出：[
<List arr={['bbb','ppp','ddd']}></List>, // 输出：bbb
oDiv
);
};
注意：
React 有两种传参方式 分别是字符串和表达式 其中 只有表达式才可以输出字符串以外的东西，比如，数组...
5）组件渲染4 —— React传参3（映射）
class Item extends React.Component{
constructor(...args) {
super(...args);
}
render(){
return <li>{this.props.str}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
}
// 还是报错了！
render(){
let aItems = this.props.arr.map(a=><Item str={a}></Item>);
return <ul>
{aItems}
</ul>;
// return <ul>
// {this.props.arr.map(a=><Item str={a}></Item>)}
// </ul>;
}
}
window.onload = function (){
let oDiv = document.getElementById('div1');
//JSX
ReactDOM.render(
<List arr={['bbb','ppp','ddd','fas']}></List>,
oDiv);
};