react總結雜燴

一、nodemon

nodemon是一種工具，經過在檢測到目錄中的文件更改時自動從新啓動節點應用程序來幫助開發基於node.js的應用程序。

nodemon並沒有要求任何對你的代碼或開發的方法中的額外變化。nodemon是一個替換包裝器node，用於在執行腳本時nodemon替換node命令行上的單詞。

安裝

npm install -g nodemon

 

二、es6以上

對象展開

//es6不支持,babel支持
const a={a:1,b:2}
const b={p:21}
const c={...a,..b}

展開運算符容許一個表達式在某處展開。展開運算符在多個參數（用於函數調用）或多個元素（用於數組字面量）或者多個變量（用於解構賦值）的地方可使用。可遍歷對象（iterables）可用.

Array,Set,String內置[Symbol.iterator]方法

 

const arr=[1,2,3,4]
const arr2=[...arr,51,52]  == [1,2,3,4,51,52]

解構賦值中展開運算符只能用在最後
let [arg1,arg2,...arg3] = [1, 2, 3, 4];
arg1 //1
arg2 //2
arg3 //['3','4']

解構賦值
let arr=["xx","hello"]
let [p1,p2] = arr

Object實用方法

Object.keys()
Object.values()
Object.entries()

let obj={a:1,b:2,c:3}
Object.keys(obj) //a,b,c
Object.values(obj) //1,2,3
Object.entries(obj)  //[[a,1],[b,2],[c,3]]

簡寫對象屬性

name=1
let obj = {name}

簡寫對象方法

let obj = {fn(){console.log(11)}}

obj.fn()

添加對象屬性

let attr1 = 'name',
    attr2 = 'age',
    attr3 = 'sex';
let person = {
    [attr1]: 'payen',
    [attr2]: 19,
    [attr3]: 'male'
}

class類

class MyApp{
    constructor(){
        this.name = "zhang";
    }
    print(){
    console.log(this.name)
}
}

let test = new MyApp();
test.print()

Set 集合元素不可重複
Map 對象

數組出重 Set(arr)

 

三、react的render

若是就一個render函數直接函數表示
如
class MyApp extend React.Component{
    constructor(){
        this.name = "zhang";
    }
    render(){
        
        return (
            <div>
                <show a="我"></show>
            </div>
            )
    }
}
function show(props){
    return <h2>{props.a}家喲</h2>;
}

export default MyApp;

五、react雜one

state 不可變對象 只能使用this,setState() 修改
constructor初始化設置
super(props)
this.state = {}

jsx其實就是js能夠直接使用數組循環渲染列表

六、事件

 this解決方式
     ()=>this.eventFn()
     this.eventFn.bind(this)

七、antd-mobile 螞蟻金服的UI框架

配置：
安裝babel-plugin-import 可在package.json裏的babel對象直接配置
 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import",{"libraryName":"antd-mobile","style":"css"}]
    ]
  }

八、redux之connect

react-redux 提供了兩個重要的對象， Provider 和 connect ，前者使 React 組件可被鏈接（connectable），後者把 React 組件和 Redux 的 store 真正鏈接起來。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect() 接收四個參數，它們分別是 mapStateToProps ， mapDispatchToProps， mergeProps 和 options 。

mapStateToProps 這個函數的第一個參數就是 Redux 的 store ，咱們從中摘取了 屬性。由於返回了具備 屬性的對象，因此 組件會有該屬性 的 props 字段。

connect 的第二個參數是 mapDispatchToProps ，它的功能是，將 action 做爲props 綁定到 組件上。

這個函數容許咱們將 store 中的數據做爲 props 綁定到組件上。

@connect裝飾器的寫法

        import React from 'react'
    import {render} from 'react-dom'
    import {connect} from 'react-redux'
    import {bindActionCreators} from 'redux'
    import action from 'action.js'
     
    @connect(
     state=>state.main,
     dispatch=>bindActionCreators(action,dispatch)
    )
    class App extends React.Component{
      render(){
        return <div>hello</div>
      }
    }    

等價於

    import React from 'react'
    import {render} from 'react-dom'
    import {connect} from 'react-redux'
    import {bindActionCreators} from 'redux'
    import action from 'action.js'
     
    class App extends React.Component{
      render(){
        return <div>hello</div>
      }
    }
    function mapStateToProps(state){
      return state.main
    }
    function mapDispatchToProps(dispatch){
      return bindActionCreators(action,dispatch)
    }
    export default connect(mapStateToProps,mapDispatchToProps)(App)    

用了裝飾器，須要安裝模塊babel-plugin-transform-decorators-legacy，而後在babel中配置

{
      "plugins":[
        "transform-decorators-legacy"
      ]
    }

九、路由

動態路由、Route、Link、Switch
BrowserRouter
Link 跳轉
Route 陸游對應的組件
Switch 只第一個匹配的組件被渲染
Redirect 刷新或初始進來時路由地址

登錄功能
<Redirect /> 就是一個組件，當組件內部有它就能夠自動重定向到指定路由組件

路由時this.props.match獲取對應信息

十、axios 攔截器

    axios.interceptors.request.use(config=>{...;return config;})    
    axios.interceptors.response.use(config=>{...;return config;})    

十一、裝飾器

es7提出了decorator的語法，讓咱們能寫出更優雅更好維護的代碼，裝飾器的本質是對現有的功能進行包裝，
能夠用來加鉤子或者加強功能等，js從語法層面支持這種寫法，讓咱們能夠保持代碼解耦。
decorator的三個參數與Object.defineProperty()同樣，但decorator
裝飾器在類上只傳入一個class, 在類方法上傳入三個參數，類、方法名、descriptor將被定義或修改的屬性描述符
而類的引入就會觸發裝飾器，調用方法會觸發descriptor的value值，而value值的this指向new出來的類，value
會先接受到傳入的參數，而後給方法。

function log(className, propName, descriptor) {
      console.log(className)
      console.log(propName)
      console.log(descriptor)
        var value = descriptor.value
        descriptor.value = function() {
            console.log(arguments)
            value()
        }
    }

    function logClass(classNmae){
      classNmae.flag = true
      return classNmae
    }
    @logClass
    class Curd{
      constructor(){
        this.vvv = 1;
      }
        @log
        update() {
        }
    }
    console.log((new Curd()).update(33))

十二、redux

reducer type命名不要衝突，容易出問題，最好另起一個文件把它放在一塊兒

action通常都是直接返回一個對象，如{type,data}，可是使用了redux-thunk，能夠先執行函數，再返回一個函數，把dispatch,getState
傳進去而後執行函數
redux-thunk中間件可讓action建立函數先不返回一個action對象，而是返回一個函數，函數傳遞兩個參數(dispatch,getState),在函數體內進行業務邏輯的封裝

dispatch是異步更新時使用的

使用了redux-thunk能夠異步、同步一塊兒使用，就是能夠直接返回對象，也能夠是函數，函數接受dispatch，實現更新操做

1三、Provider組件

Provider功能主要爲如下兩點：
在原應用組件上包裹一層，使原來整個應用成爲Provider的子組件
接收Redux的store做爲props，經過context對象傳遞給子孫組件上的connect

reducer就是實現(state, action) => newState的純函數，也就是真正處理state的地方。

1四、import 

也能夠同時將default語法與上述用法（命名空間導入或命名導入）一塊兒使用。在這種狀況下，default導入必須首先聲明。 例如：
import myDefault, {foo, bar} from "my-module";

1五、MongoDB

MongoDB使用find來進行查詢
    第一個參數決定了要返回那些文檔
    第二個參數咱們並不但願將文檔中的全部鍵/值對都返回或咱們但願返回的信息
    db.user.find({},{"name":1,"_id":0})
    只想獲得name，連 _id 都不想要

    schema能夠理解爲mongoose對錶結構的定義
    schema不具有操做數據庫的能力

    Model的每個實例（instance）就是一個document。document能夠保存到數據庫和對數據庫進行操做。
    Model一個參數時時取集合
    兩個參數時定義集合並返回集合

    由Model建立的實體，使用save方法保存數據
    var model = new User({....})
    model.save((err, doc)=>{...})

    body-parser是很是經常使用的一個express中間件，做用是對post請求的請求體進行解析。

1六、withRouter

withRouter能夠包裝任何自定義組件，將react-router 的 history,location,match 三個對象傳入。

 

express:

app.use加載插件也有順序，全部錯誤順序可能會讓插件的功能沒法使用