zoukankan      html  css  js  c++  java
  • ES6——面向对象应用

    面向对象应用——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);
    };
  • 相关阅读:
    www.insidesql.org
    kevinekline----------------- SQLSERVER MVP
    Sys.dm_os_wait_stats Sys.dm_performance_counters
    如何使用 DBCC MEMORYSTATUS 命令来监视 SQL Server 2005 中的内存使用情况
    VITAM POST MORTEM – ANALYZING DEADLOCKED SCHEDULERS MINI DUMP FROM SQL SERVER
    Cargo, Rust’s Package Manager
    建筑识图入门(初学者 入门)
    Tracing SQL Queries in Real Time for MySQL Databases using WinDbg and Basic Assembler Knowledge
    Microsoft SQL Server R Services
    The Rambling DBA: Jonathan Kehayias
  • 原文地址:https://www.cnblogs.com/sylys/p/11643987.html
Copyright © 2011-2022 走看看