面向对象应用——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. Mysql数据库表类型

    MySQL的数据表类型很多,其中比较重要的是MyISAM,InnoDB这两种. 这两种类型各有优缺点,需要根据实际情况选择适合的,MySQL支持对不同的表设置不同的类型.下面做个对比:   MyISA ...

  2. PHPExcel组件编程spl_autoload_register

    E:\html\tproject\framework\modules\common\vendor\PHPExcel\Classes\PHPExcel.php <?php /** PHPExcel ...

  3. bootstrap-multiselect 设置单选无效（设置单选依然是复选框）

    bootstrap-multiselect 的使用介绍:https://www.cnblogs.com/landeanfen/p/5013452.html bootstrap-multiselect ...

  4. 170816-关于Java基础的习题

    1. switch 括号里的可以是 int .char. byte.short.String,还有枚举类型,应用举例 不可以是long.double 2. 调用ma()方法之后,ma()方法将错误类型 ...

  5. [CSP-S模拟测试]:模板(ac)（线段树启发式合并）

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他每天都被$katarina$大神虐,仗着自己学过一些姿势就给$katarina$大神出了一道题.有一棵$n$个节点的以$1$号节 ...

  6. 蒙特卡洛（Monte Carlo）方法求面积

    如图,刷微博时,看到一个问题,第一个想到的就是用蒙特卡洛方法求解,当时正在练python,于是尝试用python编写程序. import random # 先求s1 k=0 n=100000000 f ...

  7. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  8. Vue点击切换Class变化，实现Active当前样式

    刚自学Vue不久,所以还不太熟,所以直接上代码. 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个 ...

  9. Day3 01 枚举

    枚举:关键字 enum  主要为了限定了选择范围,声明了一组相关的值类型的集合. 1.枚举类型,实质上是整整 2.如果不进行赋值操作,枚举类型从0开始递增. 3.枚举不能定义字段 属性  方法. 例如 ...

  10. react 配置ant时遇见的一个Error: Multiple configuration files found. Please remove one: – package.json#babel – .babelrc 解决方案

    这个问题是create react app 里面的package.json里面已经配置了   "babel": {     "presets": [       ...