React的使用技術有哪些

這篇文章主要介紹了React的使用技術有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇React的使用技術有哪些文章都會有所收獲，下面我們一起來看看吧。

一、react是什么

使用一個框架之前我們應該明白它是什么。就像react來說我們知道它是一種js框架，我們可以使用這個框架來編寫 html 頁面。而且我們在使用的時候可以拋棄 html 而用純 js 來編寫。

二、為什么使用react

下面是小編找尋的使用react的好處：

1、便于代碼復用

我們在平常的開發中編寫DOM的時候，如果出現有多個頁面擁有相同的模塊，那么我們就需要把相關模塊在各個 html 文件全部復制一遍，然而當我們使用react的時候只需要把這些模塊寫成組件，通過調用就可以了。

2、提高渲染效率

開發中碰到修改和更新信息是比較常發生的，所以這時候如果我們重新渲染頁面，通過使用 html 來編寫的話則會花很多的精力和時間，然而如果我們使用React的話，我們只需要通過封裝就可以解決這個問題了。

3、容易管理

在開發的時候往往網站會變得更加復雜，所以這個時候頁面的管理就變得尤其的重要，我們還是需要花費很對的精力和時間在代碼和架構上面，如果使用react的話就不需要了。

三、react不能幫我們做什么

我們之所以使用react這個框架的目的就是讓我們可以更好的管理和復制使用我們的代碼，如果自己要編寫react組件的話，那么對于開發中的基本知識我們還是要了解的，而且當我們在使用react 的時候要遵循下面兩點：

1、我們自己編寫的頁面雖然不使用html 但是需要類似jsx語法，因為react知識提高我們的復用性而已。

2、雖然我們都是親手寫css樣式，但是我們可以借助一些開源的相關組件。

四、深入了解react究竟做了什么

對于有前端基礎的小伙伴們來說，絕對我們看到的web頁面的效果的因素有兩個，html和css；只要頁面發生了改變，那么這也就以為這我們的html 和css發生了改變。

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

對于這個的話當 js 以流浪器作為宿主環境的時候，我們的瀏覽器中可以為js提供了DOM作為js操作文檔的唯一接口，當我們沒有使用任何框架時又要更新頁面的時候，我們這時候就必須要親自調用DOM提供的API來更改文檔，這樣就會迫使我們的效率極其低下；

2、react如何更新頁面

我們都知道在react中每個組件都有一個state對象，這些state對象中它存儲了當前組件需要的所有可能發生變化的數據，而且渲染的html頁面和state中的數據是一種 一 一 對應的關系。只要我們通過setState方法改變了state中的數據，那么html也 就跟著變化了，無需我們親自動手修改dom；在使用react時，只要我們根據state構建了組件，接下來只需要 考慮如何更新state即可。

五、react的基本用法

我們都知道在react的組件中分為：變化的和不變的兩種信息，而且在組件編寫時我們還需要花精力去分析，哪些屬性在組件的生命周期中是有可能發生變化的，哪些是不變的。那么對于不變的部分我們就可以寫死在html中，針對變化的部分其信息來源 有兩種 ，如下所示：

1、組件的狀態

當我們在開發中有使用到react組件時則需要為我們的組件編寫state屬性，我們編寫的目的是用來存儲了當前組件需要的數據；因為當我們需要改變狀態時，我們只需要調用當前組件的this.setState（）方法即可，瀏覽器會自動重新渲染當前組件；下面是我們的例子代碼：

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 將狀態數據傳遞到子組件當中。下面是有關的例子代碼：

//父組件
renderSquare(i) {
    return (
    <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
    />
    );
}

//子組件
class Square extends React.Component {
    render() {
        return (
        <button className="square" onClick={() =>this.props.onClick()}>
            {this.props.value}
        </button>
        );
    }
}

六、redux

1、為什么要使用redux

我們在開發中一般對于小型的項目我們是不使用redux的，因為我們都知道 redux 是一個用來管理前端數據的架構，只有在應用程序非常復雜，數據來源復雜，交互頻繁的情況下， 應用redux。

2、redux設計的三大原則

(1)、單一數據

那么什么是單一數據呢？一般是指我們所使用有關于state的程序中，這個程序中所有的state都存儲在一個單一的數據store內部，這就好比是一個巨大的對象樹一樣。

(2)、state只讀

對于state來說是只有讀取的能力，能改變state的方式就是通過action來修改

(3)、使用純函數執行修改

那么我們在開發中怎么使用純函數執行修改呢？一般我們是在需要對state進行描述的的時候編寫 reducers。然而對于readucer的話則是一個純函數，那么對于這個函數的接口的話，就是我們的state和action這兩個屬性了，而且在函數中我們只需要根據action 返回相對應的state就可以了，而且一定要有返回值才可以。

3、主要Api

下面列舉的一些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

在react中為了方便，在react中封裝了個react-redux；然而對于react-redux來說則是分為兩大類將所有組件分別是UI類和容器類，而且在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了，代碼如下：

render（
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
）

八、react-router

在開發中我們需要使用的頁面不會是只有一個的，而且在多頁面中我們還需要通過代碼讓用戶可以實現在各個頁面直接進行切換，那么對于進行各個頁面切換的時候就需要 react-route 這個架構了，因為在這個架構中就有提供了在多個頁面和組件之間進行切換的機制。

那么對于react-router架構的常用組件有下面這幾個：

<BrowserRouter> <Link>為你的應用提供聲明式的、可訪問的導航鏈接；屬性 to 。

<Route> 

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

 <Switch>

 只渲染命中的第一個路由 <Redirect> 直接渲染路由 ，屬性 to 。

關于“React的使用技術有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“React的使用技術有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。