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不起來