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加载插件也有顺序，全部错误顺序可能会让插件的功能没法使用