【ES6】结合react说一说ES6面向对象的应用

来源：暴趣科技网

基础

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.js"></script>
    <script type="text/babel">
        class Text extends React.Component{ //继承自 React.Component
            constructor(...args){ //将参数收集起来
                super(...args) //将所有参数继承并展开
            }
            render(){ //render方法是必须的
                return <span>abcD</span>
            }
        }
        window.onload = function(){
            let oDiv = document.getElementById('div1')
            ReactDOM.render( //渲染
                <Text></Text>,
                oDiv
            )
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body>

this.props

    class Item extends React.Component{
        constructor(...args){
            super(...args)
        }
        render(){
            return <li>{this.props.str}</li> //通过this.props.str设置参数
        }
    }
    window.onload = function(){
        let oDiv = document.getElementById('div1')
        ReactDOM.render(
            <ul>
                <Item str="123"></Item>
                <Item str="456"></Item>
                <Item str="7"></Item>
            </ul>,
            oDiv
        )
    }

组件加组件

    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 = []
            for(var i = 0; i < this.props.arr.length; i++){
                aItems.push(<Item str={this.props.arr[i]}></Item>)
            }
            return <ul>{aItems}</ul>
        }
    }
    window.onload = function(){
        let oDiv = document.getElementById('div1')
        ReactDOM.render(
            <List arr={[0,1,2,3]}></List>,
            oDiv
        )
    }

map优化

    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>{this.props.arr.map(a=><Item str={a}></Item>)}</ul>
        }
    }
    window.onload = function(){
        let oDiv = document.getElementById('div1')
        ReactDOM.render(
            <List arr={[0,1,2,3]}></List>,
            oDiv
        )
    }

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文