使用 react 系列 總結

從我畢業到如今也差很少快一年半了，想要找個地方沉澱下本身，同時也但願大佬們，指出我錯誤的思考。 我直接把我本身寫的 ppt 的東西複製過來了

特色

1.聲明式設計 −採用聲明範式，能夠輕鬆描述應用。

2.高效 −經過對DOM的模擬，最大限度地減小與DOM的交互。

3.靈活 −能夠與已知的庫或框架很好地配合。

4.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

5.單向響應的數據流 − React 實現了單向響應的數據流，反作用少，易於追蹤問題和維護
複製代碼

定義組件的多種方式

createClass

// es5 環境下
var Contacts = React.createClass({  
  render() {
    return (
      <div>1</div>
    )
  }
})
複製代碼

React.Component

// es6 方式須要編譯
class Contacts extends React.Component {
    constructor(props) {
        super(props);
    }
    render () {
        return <div>1</div>
    }
}
複製代碼

無狀態函數式組件

// 適合純渲染組件
const Contacts = (props) => <div>1</div>
複製代碼

生命週期

貼張官方圖

各階段函數說明

Mounting(掛載)

• getDefaultProps：獲取默認 props
• getInitialState | | constructor: 都是定義默認的 state，只不過是兩種定義組件的方式
• componentWillMount: 即將廢棄,在render以前調用，因此就算在這個方法中調用setState也不會觸發從新渲染（re-render）
• render: 最核心的方法: 返回須要渲染的東西
• componentDidMount：
  1. 此時已獲取到真實 dom， jquery 。
  2. 不過通常都用作 數據請求，此時 setState 能夠從新觸發渲染
  3. 若是一個組件有兄弟組件、父子組件那麼執行該方法的順序：排在面的子組件， 全部子組件執行完再父親組件，都是由於遞歸渲染的特性

Updating(更新) _{將會在 props或 state 更新後調用}

• componentWillReceiveProps: 即將廢棄， 由 getDerivedStateFromProps 替代,更新 state 的值、比較 nextProps和 this.props 避免重複渲染
• shouldComponentUpdate: 判斷組件是否應該從新渲染，默認爲 true，主要用於性能優化
• componentWillUpdate: state 或者 props 更新後 re-render 以前調用。不能夠在此 setSate ， 會溢出棧形成瀏覽器卡死 render()
• componentDidUpdate：能夠操做dom 發起 網絡請求

卸載階段

componentWillUnmount: 當咱們的組件被卸載或者銷燬了就會調用，咱們能夠在這個函數裏去清除一些定時器，取消網絡請求, 在 spa 中比較常見

組件通訊

父子： 經過 props
子父： 回調函數，經過更新 父親的 state 來更新
子子： 1. emit 的方式 發佈訂閱 2. 經過父親組件來中轉
跨層級組件：context context是一個全局變量,像是一個大容器,在任何地方均可以訪問到。
可是 當中間某個組件 shouldComponentUpdate 設置爲 false 的時候就 gg 了。
緣由是 shouldComponentUpdate 會切斷子樹的 rerender，當 state 或 props 
沒有發生變化時，可能意外中斷上層 context 傳播。也就是當 shouldComponentUpdate
返回 false 時，context 的變化是沒法被底層所感知的。
三方狀態庫： redux、rematch (二次封裝redux)、mobx、smobx，
這些東西藉助一句話，"若是你不知道是否須要 Redux，那就是不須要它。"    
複製代碼

redux 🌰

三大原則

• 單一數據源
• State 只讀的 （此處可能會有歧義）
• 用純函數執行修改

結合 react 使用， 一張我畫的簡圖表明我的理解

核心概念

參考阮一峯大大

路由

參考我這篇文章

更多

• 高階組件
• graphql
• react native
• 函數式編程

結語

2019 年基本計劃是 寫一個不錯的我的項目， 同時有機會去了解下底層實現，也去學習 vue 對比下。 欺騙一下本身： 新的一年，新的本身