es6常用知识（二）

头像
用户bPQb0e
    阅读 6 分钟

    七.2 面相对象的应用 （react）

    react：
    1，组件化 -class
    2，jsx
    jsx==babel==browser.js

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Test extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
    <!--  1,先用参数扩展 -->
        super(...args)  
    <!--     2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
        render(){ 
    <!--     react组件里什么都可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
    return <span>123</span>
    
        }
    }
}
<script >
    window.onload=function(){
        let oDiv=document.getElementById('div1')
        ReactDOM.render(
            <Test></Test>,
            oDiv
        )
    }
</script>
    <div id="div1"></div>
<body>

    2 组件的嵌套

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
    <!--  1,先用参数扩展 -->
        super(...args)  
    <!--     2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
        render(){ 
    <!--     react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
    return <li>{this.props.str}</li>
    
        }
    }
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
        super(...args)  
        render(){ 
        let aItems=[]
        for (let i=0;i<this.props.arr.length;i++){
            aItems.push(<Item str={this.props.arr}></Item>)
        }
        return <ul>
        {aItems}
        </ul>
    
        }
    }
}
<script >
    window.onload=function(){
        let oDiv=document.getElementById('div1')
        ReactDOM.render(
            <List arr={['abc','bbb','afw']}></List>,
            // react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
            oDiv
        )
    }
</script>
    <div id="div1"></div>
<body>

    组件嵌套 简写1

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
    <!--  1,先用参数扩展 -->
        super(...args)  
    <!--     2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
        render(){ 
    <!--     react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
    return <li>{this.props.str}</li>
    
        }
    }
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
        super(...args)  
        render(){ 
        <!-- 实际上就是把['abc','bbb','afw']映射为<Item str='abc'></Item><Item str='bbb'></Item><Item str='afw'></Item> -->
        let aItems=this.props.arr.map(a=><Item str={a}></Item>)
        return <ul>
        {aItems}
        </ul>
    
        }
    }
}
<script >
    window.onload=function(){
        let oDiv=document.getElementById('div1')
        ReactDOM.render(
            <List arr={['abc','bbb','afw']}></List>,
            // react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
            oDiv
        )
    }
</script>
    <div id="div1"></div>
<body>


3，更简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js"></script>
<!-- type="text/babel" -->
class Item extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
    <!--  1,先用参数扩展 -->
        super(...args)  
    <!--     2，在把参数展开到里面去。意思就是constructor接收多少参数，都给super多少，都给父级里面去。 -->
        render(){ 
    <!--     react组件里什么都方法可以没有，但是必须要有render方法，而且render方法必须有rerurn，返回的必须是可见的组件，不能是自己写的组件元素。 -->
    return <li>{this.props.str}</li>
    
        }
    }
}
class List extends React.Component{
<!-- Test 这个类继承自React.Component，很多功能就可以直接用了 -->
    constructor(...args){
        super(...args)  
        render(){ 
        <!-- 实际上就是把['abc','bbb','afw']映射为<Item str='abc'></Item><Item str='bbb'></Item><Item str='afw'></Item> -->
        不需要垫上aItems，直接写在return里
        return <ul>
        {this.props.arr.map(a=><Item str={a}></Item>)}
        </ul>
    
        }
    }
}
<script >
    window.onload=function(){
        let oDiv=document.getElementById('div1')
        ReactDOM.render(
            <List arr={['abc','bbb','afw']}></List>,
            // react有两种传参方式，一种是字符串，另外一种是表达式，当传字符串之外的类型的时候，用表达式{}
            oDiv
        )
    }
</script>
    <div id="div1"></div>
<body>

    八. json

    1.把真正的json对象转为为字符串形式的json。
    例：如果想把对象{a:12,b:5}拼到url上就需要json的串行化

    let json={a:12,b:5}
let str="https://www.baidu.com/"+json;
alert(str)
错误的 
结果是 https://www.baidu.com/[object Object]


let json={a:12,b:5}
// JSON有一个stringify  字符串化方法,其实就是串行化
let str="https://www.baidu.com/"+JSON.stringify(json);
alert(str)
// 错误的 
// 结果是 https://www.baidu.com/{"a":12,"b":5}



let json={a:12,b:5}
// JSON有一个stringify  字符串化方法,其实就是串行化
let str="https://www.baidu.com/"+encodeURIComponent(JSON.stringify(json));
alert(str)
// 正确的 
// 结果是 https://www.baidu.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D

    2.
    把字符串"{a:12,b:24,c:'abc'}"转为真正的json对象
    json的标准写法是
    1，只能用双引号 例如c:"abc"
    2,所以的名字都必须用引号包起来

    let str="{a:12,b:24,c:'abc'}"
let json=JSON.parse(str)
console.log(json)
错误 ，因为json的标准写法是
1，只能用双引号 例如c:"abc"
2,所以的名字都必须用引号包起来

    正确写法是如下

    let str='{"a":12,"b":24,"c":"abc"}'
let json=JSON.parse(str)
console.log(json)

正确了，结果是{a: 12, b: 24, c: "abc"}

    json 简写
    1.名字一样可简写
    2，方法简写

    let a=12;
b=5;
let json ={a:a,b:b,c:12}
console.log(json)
{a: 12, b: 5, c: 12}

    简写：名字一样可简写

    let a=12;
b=5;
let json ={a,b,c:112}
console.log(json)
{a: 12, b: 5, c: 112}

    json里有方法

    let  json={
    a:12,
    show:function(){
        alert(this.a)
    }
}
json.show()

    简写：方法可简写

        let  json={
        a:13,
        show(){
            alert(this.a)
        }
    }
    json.show()
    javascript
    用户bPQb0e
    133 声望5 粉丝
    « 上一篇
    es6常用的使用
    下一篇 »
    es6常用知识（三） prosime和generator

    引用和评论

    推荐阅读
    头像
    vue中使用slot如何把子组件里面的内容传递给父组件

    用户bPQb0e阅读 3k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新