react

React技術棧梳理

一、react是什麼?react是一個js框架,可以用它來編寫html頁面,使用react後我們可以完全拋棄h...

>

一、react是什麼?

r eact是一個js框架,可以用它來編寫html頁面,使用react後我們可以完全拋棄html(只需要一個主index檔案),而用純js來編寫頁面;

二、為什麼要使用react

和直接用html編寫頁面相比,使用react有以下幾點好處:

1. 便於程式碼的複用

用html編寫頁面時,如果多個頁面擁有基本相同的模組,那麼需要把相關模組在各個html檔案中全部複製一遍。而使用react我們只需要把這些模組寫成元件,在各個頁面中呼叫這個元件即可;

2. 提高渲染效率

當資訊發生改變時,需要重新渲染頁面,如果用html編寫,我們需要花很多精力考慮架構問題,保證渲染效率;而react把這些問題封裝了起來,編寫高效能頁面會變得特別容易;

3. 容易管理

當網站頁面變得複雜時,頁面管理將變得非常重要,我們需要花很多精力在頁面架構和程式碼維護上,而react 讓這一切變得簡單;

三、react不能幫我們做什麼

react的目的是讓我們更好的管理和複用程式碼,若自己要編寫react元件,那麼基本的html標籤的應用,css語法都是必須要掌握的;使用react後我們依然需要做以下兩點:

  1. 親自編寫所有要渲染的頁面,雖然不用使用html,但需要用類似的 JSX語法。react只是幫我們提高了複用性;

  2. 親自寫所有的css程式碼,頁面呈現效果依然需要自己分析編寫;

當然藉助很多開源的react元件,可以取代一部分這些工作,不過做出的網站大都比較雷同,缺乏個性;

四、深入理解react究竟做了什麼

對前端稍微有點基礎的都知道,前端學習有3大塊html+css+js,其中我們看到的所有web頁面的顯示效果只有兩個因素決定 ,即html和css;只要頁面發生了改變,無論是呈現的資料變了,圖表變了,圖片變了還是某 個顏色變了,無論這種改變是如何導致的,比如滑鼠點選,聲音控制或者後臺資料改變。那麼必然意味著 html或者css發生了改變;簡而言之,頁面的呈現和html+css有著一一對應的關係;而前端的主要工作,除了 編寫各種頁面之外,就是使用js語言根據資料來不斷地更新html和css,從而使頁面發生變化;

1. 原生開發如何更新頁面

當js以瀏覽器作為宿主環境時,瀏覽器為js提供了DOM作為js操作文件的唯一介面,當不使用任何框架時,要更新頁面,我們必須親自呼叫DOM提供的API來更改文件,效率極其低下;

2. react如何更新頁面

在react中每個元件都有一個state物件,它儲存了當前元件需要的所有可能發生變化的資料,渲染的html頁面和state中的資料是一種一一對應的關係。只要我們通過setState方法改變了state中的資料,那麼html也 就跟著變化了,無需我們親自動手修改dom;在使用react時,只要我們根據state構建了元件,接下來只需要 考慮如何更新state即可。react為更新dom提供了非常高效的演算法,這裏不深入展開去講了;

五、react的基本用法

react元件的編寫需要兩類資訊,變化的和不變的。在元件編寫時要花精力去分析哪些屬性在元件的生命週期 中是有可能發生變化的,哪些是不變的。不變的部分我們就可以寫死在html中,針對變化的部分其資訊來源 有兩種 ,即元件的狀態和父元件的狀態;

1. 元件的狀態

在編寫元件時,要為元件編寫一個state屬性,儲存了當前元件需要的資料;當需要改變狀態時,呼叫當前元件的this.setState()方法即可,瀏覽器會自動重新渲染當前元件,下面是官方demo的一個例子:

class Square extends React.Component {
    constructor() {
        super();
        this.state = {
            value: null,
        };
    }

    render() {
        return (
            <button className="square" onClick={() => this.setState({value: 'X'})}>
              {this.state.value}
            </button>
        );
    }
}    

2. 父元件的狀態

當你遇到需要同時獲取多個子元件資料,或者兩個元件之間需要相互通訊的情況時,把子元件的 state 資料提升至其共同的父元件當中儲存。之後父元件可以通過 props 將狀態資料傳遞到子元件當中。這樣應用當中 的狀態資料就能夠更方便地交流共享了。(官方文件),官方示例如下:

 1 //父元件
 2 renderSquare(i) {
 3     return (
 4     <Square
 5         value={this.state.squares[i]}
 6         onClick={() => this.handleClick(i)}
 7     />
 8     );
 9 }
10 
11 //子元件
12 class Square extends React.Component {
13     render() {
14         return (
15         <button className="square" onClick={() =>this.props.onClick()}>
16             {this.props.value}
17         </button>
18         );
19     }
20 }                

小結:

state——元件的狀態屬性

setState——重新設定元件的狀態(這裏注意,需要設定一個新的物件而不是在原有元件物件上做修改,至於原因,官方文件上說的很清楚)

props——子元件通過這個屬性獲得父元件的資訊

六、redux

1. 為什麼要使用redux

redux是一個用來管理前端資料的一個架構,只有在應用程式非常複雜,資料來源複雜,互動頻繁的情況下, 應用redux纔有明顯的好處;比如,某個應用有上百個元件,並且元件之間資訊互動頻繁,如果不使用redux ,那麼資料將會分散在上百個元件當中,並且當多個元件需要同一個資料時,同樣的資料在每個元件中將有 一個副本,當資料改變時,維護起來會相當麻煩。這種情況下就需要考慮引入redux;

2. redux設計的三大原則

(1) 單一資料來源

使用redux的程式,所有的state都儲存在一個單一的資料來源store內部,類似一個巨大的物件樹。

(2)state是隻讀的

state是隻讀的,能改變state的唯一方式是通過觸發action來修改

(3)使用純函式執行修改

爲了描述 action 如何改變 state tree , 你需要編寫 reducers。reducers是一些純函式,介面是當前state和action。只需要根據action,返回對應的state。而且必須要有返回。

3. 主要API

store=createStare(reducer)——建立store

state=store.getState()

store.dispatch(action)——觸發action,這是改變state的唯一介面

store.subscribe(listener)——一旦State發生變化,就自動執行這個函式,只要把 View 的更新函式(對於 React 專案,就是元件的render方法或setState方法)放入listen,就會實現 View 的自動渲染。

4. reducer的拆分

Redux 提供了一個combineReducers方法,用於 Reducer 的拆分。你只要定義各個子 Reducer 函式,然後用這個方法,就可以將它們合成一個大的 Reducer。

七、react-redux

爲了方便使用,Redux 的作者封裝了一個 React 專用的庫 React-Redux;React-Redux 將所有元件分成兩大 類:UI 元件(presentational component)和容器元件(container component),其中UI元件,是「純元件」,只負責呈現,所有資料通過props獲取;容器元件負責資料和邏輯。可以使用裝飾器模式把純元件轉化 為容器組價,這裏主要用到了三個函式:

1. mapStateToProps(state,ownprops)

建立一個從(外部的)state物件到(UI 元件的)props物件的對映關係。

2. mapStateToProps(dispatch,ownProps)

用來建立store.dispatch方法到props物件的對映。

3.connect

React-Redux 提供connect方法,用於從 UI 元件生成容器元件。它需要mapStateToProps和mapStateToProps作為引數。例如:

const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

<Provider>元件

當元件巢狀比較深的時候,內層元件要獲得state會非常麻煩,需要藉助props屬性一層一層傳遞。Proveder元件解決了這個問題,把Provider元件放在最外層,只要在Proveder上傳入store,這樣所有子元件都可以拿到state了

1 render(
2 <Provider store={store}>
3 <App />
4 </Provider>,
5 document.getElementById('root')
6 )

八、react-router

一個應用程式往往不只一個頁面,在多頁面應用程式中我們需要在各個頁面之間切換,react-route架構提供了在多個頁面和元件之間進行切換的機制;react-router常用元件如下:

<BrowserRouter>

為你的應用提供宣告式的、可訪問的導航連結。

--屬性 to

####<Route>

最基本的職責是在其 path 屬性與某個 location 匹配時呈現一些 UI。

--屬性 path

--屬性 component

--exact完全匹配

<Switch>

只渲染命中的第一個路由

<Redirect>

直接渲染路由

--屬性 to

Facebook Profile photo
Written by Nat
This is the author box. A short description about the author of this article. Could be their website link, what they like to read about and so on. Profile