面向对象应用——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. SonarQube规则之漏洞类型

    漏洞类型: 1."@RequestMapping" methods should be "public"漏洞 阻断标注了RequestMapping是contr ...

  2. 千呼万唤始出来——DataV私有部署功能

    DataV的开发者们,今天进入你的用户中心,就会发现有一个小惊喜默默的在等待着你.那就是——私有部署功能上线啦! 一直以来私有部署都是一些有需要的小伙伴所望尘莫及的,毕竟高贵的身份摆在那里,现在不用再 ...

  3. SPOJ 694 || 705 Distinct Substrings ( 后缀数组 && 不同子串的个数 )

    题意 : 对于给出的串,输出其不同长度的子串的种类数 分析 : 有一个事实就是每一个子串必定是某一个后缀的前缀,换句话说就是每一个后缀的的每一个前缀都代表着一个子串,那么如何在这么多子串or后缀的前缀 ...

  4. js解决手机键盘影响定位的问题

    // 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...

  5. Atcoder arc079 D Decrease (Contestant ver.) （逆推）

    D - Decrease (Contestant ver.) Time limit : 2sec / Memory limit : 256MB Score : 600 points Problem S ...

  6. fedora23帮定键盘系统操作快捷键

    在All settings -> keyboard 主要是以super为主, 然后有 super+ shift+...虽然感觉用 ctrl+super+... 来组合更方便, 但是用 shift ...

  7. Eclipse Java工程转为Web工程步骤

    找到工程的.project文件,在<natures>标签中增加以下两行配置:<nature>org.eclipse.wst.common.modulecore.ModuleCo ...

  8. Android studio 不能创建Activity等文件

    这是我之前安装Android studio的一系列问题:http://tieba.baidu.com/p/5921373177 1. 不能创建Activity等许多文件: 2. 工程运行不了: 3. ...

  9. postman+newman+jenkins接口自动化

    postman用来做接口测试非常方便,接口较多时,则可以实现接口自动化 目录 1.环境准备 2.本机调试脚本 3.集成jenkins 1.环境准备 1.1安装nodejs6.0+ 安装nodejs6. ...

  10. 模拟鼠标向下滚动 http://bbs.2ccc.com/topic.asp?topicid=461769

    我想模拟鼠标滚轮,下面的代码能向上滚动,怎么样下向滚动啊 mouse_event( MOUSEEVENTF_WHEEL,0,0,WHEEL_DELTA,0); 我把参数设置为mouse_event(  ...