react总结杂烩

nodemon是一种工具，通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于node.js的应用程序。

nodemon并没有要求任何对你的代码或开发的方法中的额外变化。nodemon是一个替换包装器node，用于在执行脚本时nodemon替换node命令行上的单词。

安装

npm install -g nodemon

2、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实用方法

扫描二维码关注公众号，回复： 2169298 查看本文章

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)

3、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;

5、react杂one

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

jsx其实就是js可以直接使用数组循环渲染列表

6、事件

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

7、antd-mobile 蚂蚁金服的UI框架

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

8、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"
      ]
    }

9、路由

动态路由、Route、Link、Switch
BrowserRouter
Link 跳转
Route 陆游对应的组件
Switch 只第一个匹配的组件被渲染
Redirect 刷新或初始进来时路由地址

登陆功能
<Redirect /> 就是一个组件，当组件内部有它就可以自动重定向到指定路由组件

路由时this.props.match获取对应信息

10、axios 拦截器

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

11、装饰器

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))

12、redux

reducer type命名不要冲突，容易出问题，最好另起一个文件把它放在一起

action一般都是直接返回一个对象，如{type,data}，但是使用了redux-thunk，可以先执行函数，再返回一个函数，把dispatch,getState
传进去然后执行函数
redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装

dispatch是异步更新时使用的

使用了redux-thunk可以异步、同步一起使用，就是可以直接返回对象，也可以是函数，函数接受dispatch，实现更新操作

13、Provider组件

Provider功能主要为以下两点：
在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
接收Redux的store作为props，通过context对象传递给子孙组件上的connect

reducer就是实现(state, action) => newState的纯函数，也就是真正处理state的地方。

14、import

也可以同时将default语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，default导入必须首先声明。例如：
import myDefault, {foo, bar} from "my-module";

15、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请求的请求体进行解析。

16、withRouter

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。

express:

app.use加载插件也有顺序，所有错误顺序可能会让插件的功能无法使用

猜你喜欢