SeaJS是一個(gè)遵循CommonJS規(guī)范的JavaScript模塊加載框架。本文給大家分享sea.js知識總結(jié),感興趣的朋友一起學(xué)習(xí)吧
http://reactjs.cn/
http://reactjs.cn/react/docs/getting-started-zh-CN.html
http://www.thecss.cn/
https://css.w3ctech.com/

圖片.png

組件和插件

Image.png

Image.png

w3c自定義組件里面第一個(gè)字母必須大寫：

Image.png

寫好組件就進(jìn)行調(diào)用：

Image.png

圖片.png

1：arr.js

let arr = [
    <h1>hello wrold!</h1>
];

let map = new Map();

// 返回模塊的輸出對象
//modue.exports = arr;

// es6 模塊返回的對象
// 使用 import * as util 接收
export { arr , map};

2:list.js

import { createClass,Children } from "react";

let set = new Set();

set.add("java");
set.add("c#");
set.add("javascript");
set.add("react");

const List = createClass({
    render:function(){
        let [...list] = set;
        return ( 
            <ul>
                {
                    list.map((item,i)=>{
                    // key 是 react 識別元素 的 id
                    // 每一個(gè)元素都有一個(gè) key 值，
                    // 這里循環(huán)的元素 react 無法動態(tài)的給元素一個(gè) id
                    // 所以我們需要手動給一個(gè) id
                        return <li key={`li-${i}`}>
                            { item }
                        </li>;
                    })
                }
            </ul>
        );
    }
});

const List2 = createClass({
    render:function(){
        return ( 
            <ul>
                {
                    Children.map(set,(item,i)=>{
                    // key 是 react 識別元素 的 id
                    // 每一個(gè)元素都有一個(gè) key 值，
                    // 這里循環(huán)的元素 react 無法動態(tài)的給元素一個(gè) id
                    // 所以我們需要手動給一個(gè) id
                        return <li key={`li-${i}`}>
                            { item }
                        </li>;
                    })
                }
            </ul>
        );
    }
});

export { List , List2};
//modules.exports = list

3:test.js

import React from "react";
import { render } from "react-dom";

//解構(gòu)賦值 取出需要的模塊
// * as util 
// 將導(dǎo)入的模塊下返回的所有數(shù)據(jù)以對象的形式 賦值給 util,
import * as Util from "./arr.js";

import { List,List2 } from "./list.js";

function test(){
    return "hello react";
}

function onload(){
    var style = { 
        "color" : "red",
        "fontSize" : "24px"
    };
    //組件的使用，第一個(gè)字母必須大寫，這是 w3c 規(guī)范
    render(
        <div style={ style }>
            {
                test()
            } 
            <List/>
            <hr/>
            <List2/>
        </div>,
        document.getElementById("example")
    );
}

if(window){
    window.onload = onload;
}else{
    setTimeout(onload,0);
}

編譯器對代碼的識別，引入模塊的時(shí)候，不寫后綴名

Image.png

Props:

Image.png

js是弱類型：
整型
傳過去會可能變成字符串型的數(shù)據(jù)：
加斜杠的原因：

Image.png

直接接收就行，不需要再寫解構(gòu)賦值了

es6中的bug

Image.png

通過機(jī)制，找到真實(shí)的dom機(jī)制；
babel在轉(zhuǎn)換es6 class的時(shí)候會丟失this對象：

Image.png

我們使用bind強(qiáng)制轉(zhuǎn)換這個(gè)函數(shù)的對象；轉(zhuǎn)換為當(dāng)前的.