<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          React項目實戰:react-redux-router基本原理

          時間:?2017-11-27閱讀:?1633標簽:?redux作者:?cinglong

          JSX

          本質上來講,JSX 只是為React.createElement(component, props, ...children)方法提供的語法糖。比如下面的代碼:

          const element = (
            <h1 className="greeting">
              Hello, world!
            </h1>
          );

          編譯為:

          const element = React.createElement(
            'h1',
            {className: 'greeting'},
            'Hello, world!'
          );

          React.createElement()這個方法首先會進行一些避免bug的檢查,之后會返回一個類似下面例子的對象:

          const element = {
            type: 'h1',
            props: {
              className: 'greeting',
              children: 'Hello, world'
            }
          };

          這樣的對象被稱為React元素,它代表所有你在屏幕上看到的東西。
          我們用 React 開發應用時一般只會定義一個根節點。要將 React 元素渲染到根DOM節點中,我們通過把它們都傳遞給ReactDOM.render()的方法來將其渲染到頁面上:

          ReactDOM.render(
            element,
            document.getElementById('root')
          );

          每當 React 元素發生變化時,ReactDOM首先會比較元素內容先后的不同,然后操作瀏覽器DOM更新改變了的部分。

          組件 & Props

          當 React 遇到的元素是用戶自定義的組件,它會將 JSX 屬性作為單個對象傳遞給該組件,這個對象稱之為props。無論是使用函數或是類來聲明一個組件,它決不能修改它自己的 props 。
          例如,這段代碼會在頁面上渲染出Hello,Sara:

          //使用 ES6 class 來定義一個組件,組件名稱必須以大寫字母開頭。
          class Welcome extends React.Component {
            render() {
              return <h1>Hello, {this.props.name}</h1>;
            }
          }
          
          const element = <Welcome name="Sara" />;
          ReactDOM.render(
            element,
            document.getElementById('root')
          );

          我們來回顧一下在這個例子中發生了什么:

            我們對<Welcome name="Sara" />元素調用了ReactDOM.render()方法。

            React 將{name: 'Sara'}作為props傳入并調用 Welcome 組件。

            Welcome 組件將<h1>Hello, Sara</h1>元素作為結果返回。

            ReactDOM 將DOM更新為<h1>Hello, Sara</h1>。

          State & 生命周期

          組件的通過props獲取屬性,且其不能修改;當我們需要修改當前組件的狀態時,要用到state來設置局部狀態,需要通過this.setState()來更新組件局部狀態:

          class Toggle extends React.Component {
            constructor(props) {
              super(props);    //初始化this,并賦值this.props
              this.state = {isToggleOn: true};    //初始化this.state
              this.handleClick = this.handleClick.bind(this);    //為this.handleClick綁定this對象
            }
          
            handleClick() {
              this.setState(prevState => ({
                isToggleOn: !prevState.isToggleOn
              }));    //用this.setState()更新this.state
            }
          
            render() {
              return (
                <button onClick={this.handleClick}>
                  {this.state.isToggleOn ? 'ON' : 'OFF'}
                </button>
              );
            }
          }
          
          ReactDOM.render(
            <Toggle />,
            document.getElementById('root')
          );

          每一個組件都有幾個你可以重寫以讓代碼在處理環節的特定時期運行的“生命周期方法”。方法中帶有前綴will的在特定環節之前被調用,而帶有前綴did的方法則會在特定環節之后被調用。

          裝配:這些方法會在組件實例被創建和插入DOM中時被調用:

          - constructor(`props`)
          - componentWillMount()
          - render()
          - componentDidMount()

          更新:屬性或狀態的改變會觸發一次更新。當一個組件在被重渲時,這些方法將會被調用:

          - componentWillReceiveProps(`nextProps`)
          - shouldComponentUpdate(`nextProps`, `nextState`)
          - componentWillUpdate(`nextProps`, `nextState`)
          - render()
          - componentDidUpdate(`prevProps`, `prevState`)

          卸載:當一個組件被從DOM中移除時,該方法被調用:

          - componentWillUnmount()
          

          當項目視圖交互復雜且頻繁的時候,依舊采用 state 進行狀態更改會顯得異常繁瑣和不可預測。
          這時我們就需要借助 Redux 框架,將狀態數據全部轉交給 Redux 處理,React 專一負責視圖顯示,這樣會讓項目邏輯變得簡單而清晰。


          Redux相關

          三大原則:

          整個應用的 state 被儲存在一棵 object tree 中,并且這個 object tree 只存在于唯一一個store中。

          惟一改變 state 的方法就是觸發action,action 是一個用于描述事件的普通對象。

          為了描述 action 如何改變 state tree ,你需要編寫reducers。

          Action

          Action 是把數據從項目傳到 store 的有效載荷。它是 store 數據的唯一來源。通常你會通過store.dispatch()將 action 傳到 store。

          Action 本質上是 JavaScript 普通對象,添加新 todo 任務的 action 是這樣的:

          {
            type: 'ADD_TODO',
            text: 'Build my first Redux app'
          }

          Action 創建函數就是生成 action 的方法。在 Redux 中的 action 創建函數只是簡單的返回一個 action:

          function addTodo(text) {
            return {
              type: 'ADD_TODO',
              text: text
            }
          }

          這樣做將使 action 創建函數更容易被移植和測試。只需把 action 創建函數的結果傳給 dispatch() 方法即可發起一次 dispatch 過程。

          dispatch(addTodo(text));
          
          //或者創建一個 被綁定的 action 創建函數 來自動 dispatch:
          const boundAddTodo = (text) => dispatch(addTodo(text));
          boundAddTodo(text);

          store 里能直接通過 store.dispatch() 調用 dispatch() 方法,但是多數情況下你會使用 react-redux 提供的connect()幫助器來調用。

          Reducer

          Action 只是描述了有事情發生了這一事實,而reducer要做的事情正是指明應用如何更新 state 。reducer 就是一個純函數,接收舊的 state 和 action,返回新的 state。

          (previousState, action) => newState

          保持 reducer 純凈非常重要。永遠不要在 reducer 里做這些操作:

          修改傳入參數;

          執行有副作用的操作,如 API 請求和路由跳轉;

          調用非純函數,如 Date.now() 或 Math.random()。

          我們將以指定 state 的初始狀態作為開始。Redux 首次執行時,state 為 undefined,此時我們可借機設置并返回應用的初始 state:

          const initialState = {};    //初始化state
          
          function todoApp(state = initialState, action) {
            switch (action.type) {
              case 'ADD_TODO':
                return Object.assign({}, state, {
                  text: action.text
                })
              default:
                return state    //在 default 情況下返回舊的 state
            }
          }

          每個 reducer 只負責管理全局 state 中它負責的一部分。每個 reducer 的 state 參數都不同,分別對應它管理的那部分 state 數據。

          combineReducers()所做的只是生成一個函數,這個函數來調用你的一系列 reducer,每個 reducer 根據它們的 key 來篩選出 state 中的一部分數據并處理,然后這個生成的函數再將所有 reducer 的結果合并成一個大的對象。

          import { combineReducers } from 'redux';
          
          const todoApp = combineReducers({
            visibilityFilter,
            todos
          })
          
          export default todoApp;

          注意上面的寫法和下面完全等價:

          export default function todoApp(state = {}, action) {
            return {
              visibilityFilter: visibilityFilter(state.visibilityFilter, action),
              todos: todos(state.todos, action)
            }
          }

          combineReducers 接收一個對象,可以把所有頂級的 reducer 放到一個獨立的文件中,通過 export 暴露出每個 reducer 函數,然后使用 import * as reducers 得到一個以它們名字作為 key 的 object:

          import { combineReducers } from 'redux'
          import * as reducers from './reducers'
          
          const todoApp = combineReducers(reducers)

          Store

          action 來描述“發生了什么,reducers 根據 action 更新 state,Store就是把它們聯系到一起的對象。Store 有以下職責:

          維持應用的 state;

          提供getState()方法獲取 state;

          提供dispatch(action)方法更新state;

          通過subscribe(listener)注冊監聽器;

          通過subscribe(listener)返回的函數注銷監聽器。

          我們使用 combineReducers() 將多個 reducer 合并成為一個。現在我們將其導入,并傳遞 createStore()。

          import { createStore } from 'redux'
          import todoApp from './reducers'
          let store = createStore(todoApp)

          createStore() 的第二個參數是可選的, 用于設置 state 初始狀態。這對開發同構應用時非常有用,服務器端 redux 應用的 state 結構可以與客戶端保持一致, 那么客戶端可以將從網絡接收到的服務端 state 直接用于本地數據初始化。

          let store = createStore(todoApp, window.STATE_FROM_SERVER);


          數據流

          Redux 應用中數據的生命周期遵循下面 4 個步驟:

            調用 store.dispatch(action)。

            Redux store 調用傳入的 reducer 函數。

            根 reducer 應該把多個子 reducer 輸出合并成一個單一的 state 樹。

            Redux store 保存了根 reducer 返回的完整 state 樹。

          Router相關

          直接使用整合后的react-router-redux,后面抽時間再詳細講一下,具體使用的話模仿官方案例吧,官方文檔

          容器組件 和 展示組件

          Redux 的 React 綁定庫包含了 容器組件和展示組件相分離 的開發思想。

          明智的做法是只在最頂層組件(如路由操作)里使用 Redux。其余內部組件僅僅是展示性的,所有數據都通過 props 傳入。

          原文來源:https://segmentfault.com/a/1190000012170435


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/169

          React-redux: React.js 和 Redux 架構的結合

          通過Redux 架構理解我們了解到 Redux 架構的 store、action、reducers 這些基本概念和工作流程。我們也知道了 Redux 這種架構模式可以和其他的前端庫組合使用,而 React-redux 正是把 Redux 這種架構模式和 React.js 結合起來的一個庫

          解決頁面刷新redux數據丟失問題

          對于目前普遍的“單頁應用”,其中的好處是,前端可以從容的處理較復雜的數據模型,同時基于數據模型可以進行變換,實現更為良好的交互操作。良好的交互操作背后,其實是基于一個對應到頁面組件狀態的模型,隨便稱其為UI模型。

          redux 和 mobx 調研結果- mobx

          mobx 不同于 redux 的單一數據源的統一管理,它可以有多個 store, 為了便于維護 ,每一個 store 都是一個類,這樣便于維護和擴展;mobx 不同于 redux 的單一數據源的統一管理

          深入學習和理解 Redux

          Redux官網上是這樣描述Redux,Redux is a predictable state container for JavaScript apps.(Redux是JavaScript狀態容器,提供可預測性的狀態管理)。 目前Redux GitHub有5w多star,足以說明 Redux 受歡迎的程度。

          redux之redux-thunk和redux-saga

          redux作為狀態管理倉庫,在我們前端應用中發揮著非常重要的作用,先放一張官方redux flow圖片,使用middleWare背景:我們知道redux中數據流是同步的,不支持異步action更新或獲取數據,但是在實際項目中異步請求數據絕對是高頻出現,并且可以說占據了9成以上的業務場景

          如何使用24行JavaScript代碼實現Redux?

          Redux是迄今為止創建的最重要的JavaScript庫之一,靈感來源于以前的藝術比如Flux和Elm,Redux通過引入一個包含三個簡單要點的可伸縮體系結構,使得JavaScript函數式編程成為可能。如果你是初次接觸Redux

          基于Hooks 的 Redux 速成課

          你對 Redux 感到困惑嗎?如果使用新的 Redux Hooks,會更加簡單!這里是一個關于 Redux 的速成班,將配合 React 函數組件使用:

          redux和react-redux

          redux是react的狀態管理工具,卻不僅僅只是為了react而生的,所以在使用中會存在痛點。而react-redux是專門為了react定制,目的是為了解決redux的痛點,起到了補充的作用。flux無非就是一個常見的event dispatcher

          動手實現一個react-redux

          react-redux 是 redux 官方 React 綁定庫。它幫助我們連接UI層和數據層。本文目的不是介紹 react-redux 的使用,而是要動手實現一個簡易的 react-redux,希望能夠對你有所幫助。

          帶著問題看React-Redux源碼

          我在讀React-Redux源碼的過程中,很自然的要去網上找一些參考文章,但發現這些文章基本都沒有講的很透徹,很多時候就是平鋪直敘把API挨個講一下,而且只講某一行代碼是做什么的,卻沒有結合應用場景和用法解釋清楚為什么這么做。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网