前端知識總結(jié)

guyan0319 發(fā)布于2019-08-23 12:35 / 3407人閱讀

摘要：第二步，協(xié)程執(zhí)行到一半，進入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程。第三步，一段時間后協(xié)程交還執(zhí)行權(quán)。第四步，協(xié)程恢復(fù)執(zhí)行。

react-helmet

作用：可以管理頁面的head

Example

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        
            
                
                My Title
                
            
            ...
        
    );
  }
};

Nested or latter components will override duplicate changes:


    
        My Title
        
    
 
    
        
            Nested Title

outputs:


    Nested Title

dva

dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個輕量級的應(yīng)用框架。

官網(wǎng)鏈接：https://dvajs.com/

Generator

形式上，Generator 函數(shù)是一個普通函數(shù)，但是有兩個特征。一是，function關(guān)鍵字與函數(shù)名之間有一個星號；二是，函數(shù)體內(nèi)部使用yield表達式，定義不同的內(nèi)部狀態(tài)（yield在英語里的意思就是“產(chǎn)出”）。

function* helloWorldGenerator() {
  yield "hello";
  yield "world";
  return "ending";
}

var hw = helloWorldGenerator();
hw.next()
// { value: "hello", done: false }

hw.next()
// { value: "world", done: false }

hw.next()
// { value: "ending", done: true }

hw.next()
// { value: undefined, done: true }

Promise

回調(diào)

fs.readFile(fileA, "utf-8", function (err, data) {
  fs.readFile(fileB, "utf-8", function (err, data) {
    // ...
  });
});

Promise

var readFile = require("fs-readfile-promise");

readFile(fileA)
.then(function (data) {
  console.log(data.toString());
})
.then(function () {
  return readFile(fileB);
})
.then(function (data) {
  console.log(data.toString());
})
.catch(function (err) {
  console.log(err);
});

協(xié)程

function* asyncJob() {
  // ...其他代碼
  var f = yield readFile(fileA);
  // ...其他代碼
}

協(xié)程

傳統(tǒng)的編程語言，早有異步編程的解決方案（其實是多任務(wù)的解決方案）。其中有一種叫做"協(xié)程"（coroutine），意思是多個線程互相協(xié)作，完成異步任務(wù)。

協(xié)程有點像函數(shù)，又有點像線程。它的運行流程大致如下。

第一步，協(xié)程A開始執(zhí)行。
第二步，協(xié)程A執(zhí)行到一半，進入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B。
第三步，（一段時間后）協(xié)程B交還執(zhí)行權(quán)。
第四步，協(xié)程A恢復(fù)執(zhí)行。
上面流程的協(xié)程A，就是異步任務(wù)，因為它分成兩段（或多段）執(zhí)行。

var gen = function* () {
  var f1 = yield readFile("/etc/fstab");
  var f2 = yield readFile("/etc/shells");
  console.log(f1.toString());
  console.log(f2.toString());
};

var co = require("co");
co(gen);

co(gen).then(function (){
  console.log("Generator 函數(shù)執(zhí)行完成");
});

RESTful

REST全稱是Representational State Transfer，中文意思是表征性狀態(tài)轉(zhuǎn)移

統(tǒng)一資源接口
GET，DELETE，PUT和POST

react-draft-wysiwyg 富文本編輯器

what you see is what you get

A Wysiwyg editor built using ReactJS and DraftJS libraries.