React-小总结

1.create-react-app

-eject

 

2.组件

-class

-function

 

3.拆分

 

 

4.信息传递

-父组件到子组件  父亲属性 子用props接受

-子组件到父组件  父亲绑定一个属性（函数） 儿子用props调用并赋予一个需要传递的值

-状态提升

-context

 

5.JSX

-{} 表达式

• 语法糖(babel来编译)
• React.createElement(tagname,{attr}.children)

6.  事件

    -onEvent(camel-case)

    -onClick={this.handleButtonClick.bind(this)}

    -this.handleButtonClick=this.handleButtonClick.bind(this)  写在constructor 为了提高性能、

    -（）=》{this.handleButtonClick()}

7.表单

    -受控组件; value,onChange

    -非受控组件: ref

8.ref

-ref=''myDev"

-ref={input=>return this.myDiv=input}

9.setState

    -通过setState修改state里面的数据 如果state的修改不依赖原来的state：setState({})

    -如果依赖state:setState((prevSState)=>{x:[...prevState.'a']}

    -第二个参数是等待state的修改完成，并真正的渲染完DOM setState({},()=>{do...}),类似于vue.js的nextTick

10.生命周期函数

    -initialization ：constructor

    -mounting : componentWillMount render componentDidMount

    -updating: componentWillReceiveProps shouldComponentUpdate componentWillupdate render componentDidupdate 

    -unmounting:  componentWillUnmount

11.虚拟Dom和Diff算法

 

 

12.高阶组件

    -函数：传入的是个组件，输出组件  例如  withRouter()

13.styled-components

    -css in js

14.react-router-dom

    -包容性路由(默认)，排他性路由(Switch,exact)

    - BrowserRouter,HashRouter

    - route

    -route的两个属性: children=func;render=func（render在路径匹配的时候才执行，children不管是否匹配都执行）

    -路由匹配挂载的组件在props会有三个对象:location，mach,history

    -普通组件是么有locaion,match,history  需要用withRouter去增强

    -普通组件是没有

    -link，navLink(activeClassname)

    -history.push(path,state)

    -传参:/:id,history分析pathName,通过state传参

 

 

 

React动画

 

先安装

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如何让x.y比较相等 

如果这两个对象比较深，又该怎么办

 

https://facebook.github.io/immutable-js/docs/#/

 

Immutable

 

数组和对象的本质区别？

数组是有序的

 

 

 

 

 

 

 

 

 

immutable  push返回的是新的数组 而不像原生的返回一个长度

 

 

 

 

 

 

ES8 的特性

 

 

 

 

 

 

 

 

 

 

这个map转换后的不是数组  

 

 

 

 

 

 

 

 

 

 

 

 

 

Rxjs:管道 流的操作 经典的响应式操作

TS：在angular中没有TS  run不起来