面向对象应用——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);

};

ES6——面向对象应用的更多相关文章

  1. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  2. JS - ES5与ES6面向对象编程

    1.面向对象 1.1 两大编程思想 1.2 面向过程编程 POP(Process-oriented programming) 1.3 面向对象编程 OOP (Object Oriented Progr ...

  3. ES6 面向对象笔记

    JS面向对象两大编程思想 面向过程 面向对象 面向过程编程POP         面向过程就是分析出问题的需要步骤,然后用函数一步一步的实现,使用的时候一个一个调用就可以了 面向对象编程OOP     ...

  4. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  5. ES6——面向对象-基础

    面向对象原来写法 类和构造函数一样 属性和方法分开写的 // 老版本 function User(name, pass) { this.name = name this.pass = pass } U ...

  6. es6面向对象

    <script> class user{ constructor(name,age){ this.name=name; this.age=age; } showName(){ alert( ...

  7. es6 面向对象选项卡（自动轮播功能）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...

  9. ES6新增语法(四)——面向对象

    ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...

随机推荐

  1. 小程序-登录-token

    1.前端调用wx.login()获取code值 2.前端通过调用wx.getUserInfo获取iv.rawData.signature.encryptedData等加密数据,传递给后端 3.服务器通 ...

  2. DNS域名解析系统

    1.DNS的组成 DNS系统是为解析域名为IP地址而存在的,它是由域名空间.资源记录.名称服务器和解析器组成. 域名空间是包含一个树状结构,用于存储资源记录的空间. 资源记录是与域名相关的数据,如IP ...

  3. HDU 6206 Apple ( 高精度 && 计算几何 && 三点构圆求圆心半径 )

    题意 : 给出四个点,问你第四个点是否在前三个点构成的圆内,若在圆外输出"Accepted",否则输出"Rejected",题目保证前三个点不在一条直线上. 分 ...

  4. 【BZOJ4337】树的同构（树同构，哈希）

    题意: 树是一种很常见的数据结构. 我们把N个点,N-1条边的连通无向图称为树. 若将某个点作为根,从根开始遍历,则其它的点都有一个前驱,这个树就成为有根树. 对于两个树T1和T2,如果能够把树T1T ...

  5. Android使用命令行操作数据库

    所有的应用程序本地文件都存放在/data/data/目录下 C:\Users\nicole>adb shell * daemon not running. starting it now on ...

  6. 解决Acunetix 12中文汉化的方法

    最近下载一款测试软件acunetix,苦于满屏英文的苦恼,看不懂,于是乎就问度娘,结果度娘就是给中文破解包: 我是12版的,网上提供的都是11版的,没法用.怎么办呢?还好我是做测试的,平时做兼容性测试 ...

  7. 服务器中常见的RAID

    Standalone 最普遍的单磁盘储存方式. Cluster 集群储存是通过将数据分布到集群中各节点的存储方式,提供单一的使用接口与界面,使用户可以方便地对所有数据进行统一使用与管理. Hot sw ...

  8. vue-router 2.0 跳转之router.push()

    router.push(location) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航 ...

  9. 开源认证组件汇总 Kerberos和CAS

    一.Kerberos 1.Kerberos原理和工作机制 概述:Kerberos的工作围绕着票据展开,票据类似于人的驾驶证,驾驶证标识了人的信息,以及其可以驾驶的车辆等级. 1.1 客户机初始验证   ...

  10. JavaScript method overload

     https://stackoverflow.com/questions/2187666/help-with-js-and-functions-parameters JavaScript doesn' ...