面向对象应用——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. postman—Sandbox和断言

    Postman沙盒 Postman Sandbox是一个JavaScript执行环境,您可以在编写预请求脚本和测试脚本(在Postman和Newman中)时可用.在这个沙箱中执行您在预请求/测试脚本部 ...

  2. 前端node面试题之---对比JS和NodeJS的区别

    区别: 1.JS运行在浏览器端,用于用户的交互效果,NodeJS运行在服务器端,用于服务器的操作,例如,Web服务器创建,数据库的操作,文件的操作等 2.JS运行在浏览器端,存在多个JS解释器,存在兼 ...

  3. mysql CREATE TABLE语句 语法

    mysql CREATE TABLE语句 语法 作用:创建数据库中的表. 大理石量具系列 语法:CREATE TABLE 表名称 (列名称1 数据类型,列名称2 数据类型,列名称3 数据类型,.... ...

  4. 6.12友谊赛T4城市交通费题解

    与普通的最短路径不同的是,题目中新引入了一个计入总体的费用——城市建设费.由于城市建设费由整体的某最大值决定,导致解没有最优子结构的性质,给思维带来难度. 既然最棘手的是城市建设费,我们就对它分类讨论 ...

  5. Apache2.4常用编译参数

    转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...

  6. ORACLE 临时表空间管理

     临时表空间和临时段 临时表空间用于存放排序.临时表等数据,其信息不需要REDO,因此临时表的DML操作往往比普通表产生的REDO少很多.临时表数据变化不产生REDO,UNDO数据变化产生REDO.临 ...

  7. MySQL主从复制之异步模式

    MySQL主从复制有异步模式.半同步模式.GTID模式以及多源复制模式,MySQL默认模式是异步模式.所谓异步模式,只MySQL 主服务器上I/O thread 线程将二进制日志写入binlog文件之 ...

  8. WinForm实现最小化右下角

    首先,要在窗体里面加入这么两个控件,左边的是托盘控件,右边的是菜单控件. 然后设置窗体的FormClosing事件: if (e.CloseReason == CloseReason.UserClos ...

  9. CBAM: Convolutional Block Attention Module

    1. 摘要 作者提出了一个简单但有效的注意力模块 CBAM,给定一个中间特征图,我们沿着空间和通道两个维度依次推断出注意力权重,然后与原特征图相乘来对特征进行自适应调整. 由于 CBAM 是一个轻量级 ...

  10. day48—JavaScript键盘事件

    转行学开发,代码100天——2018-05-03 今天继续学习JavaScript事件基础之键盘事件. 键盘代号获取 keyCode 键盘事件:onkeydown onkeyup 如通过键盘上下左右按 ...