面向对象应用——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. adb打开系统设置的命令

    adb命令打开手机设置页面 设置主页面adb shell am start com.android.settings/com.android.settings.Settings 安全adb shell ...

  2. php shuffle()函数 语法

    php shuffle()函数 语法 作用:把数组中的元素按随机顺序重新排序:富瑞华 语法:shuffle(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:若成功则返回 ...

  3. luogu P1028 数的计算 x

    P1028 数的计算 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先输入一个自然数n(n<=1000),然后对此自然数按照如下方法进行处理: 1.不作任何处理; 2.在它 ...

  4. sh_05_超市买苹果

    sh_05_超市买苹果 # 1. 定义苹果的单价 price = 8.5 # 2. 挑选苹果 weight = 7.5 # 3. 计算付款金额 money = weight * price # 4. ...

  5. 【BZOJ5092】分割序列（高维前缀和）

    题意:对于一个长度为n的非负整数序列b_1,b_2,...,b_n, 定义这个序列的能量为:f(b)=max{i=0,1,...,n}((b_1 xor b_2 xor...xor b_i)+(b_{ ...

  6. Redis高可用分布式

    阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务后,对于业务及用户毫无影响. 停止服务的原因可能由于网卡.路由器 ...

  7. RedisTemplate访问Redis数据结构（一）——String

    当对String数据结构进行操作时,推荐直接使用spring-data-redis提供的StringRedisTemplate,其配置如下 <bean id="stringRedisT ...

  8. Spring Cloud架构教程 （八）消息驱动的微服务（消费组）【Dalston版】

    使用消费组实现消息消费的负载均衡 通常在生产环境,我们的每个服务都不会以单节点的方式运行在生产环境,当同一个服务启动多个实例的时候,这些实例都会绑定到同一个消息通道的目标主题(Topic)上. 默认情 ...

  9. curl_init raw传递json参数

    protected function curl_vm_record($url, $platform, $authorization, $jsonStr) { $ch = curl_init(); cu ...

  10. iOS即时通讯之CocoaAsyncSocket源码解析四

    原文 前言: 本文为CocoaAsyncSocket源码系列中第二篇:Read篇,将重点涉及该框架是如何利用缓冲区对数据进行读取.以及各种情况下的数据包处理,其中还包括普通的.和基于TLS的不同读取操 ...