摘要：組件將元素作為結果返回。是把數據從項目傳到的有效載荷。有以下職責維持應用的提供方法獲取提供方法更新通過注冊監聽器通過返回的函數注銷監聽器。系列目錄前端大統一時代即將來臨項目實戰環境搭建項目實戰基本原理項目實戰登錄頁面編輯中

React 是一個采用聲明式，高效而且靈活的用來構建用戶界面的框架。

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

const element = (
  

    Hello, world!
  
);

編譯為：

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更新改變了的部分。

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

//使用 ES6 class 來定義一個組件，組件名稱必須以大寫字母開頭。
class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById("root")
);

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

我們對元素調用了ReactDOM.render()方法。

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

Welcome 組件將

Hello, Sara

ReactDOM 將DOM更新為

Hello, Sara

組件的通過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 (
      
        {this.state.isToggleOn ? "ON" : "OFF"}
      
    );
  }
}

ReactDOM.render(
  ,
  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 專一負責視圖顯示，這樣會讓項目邏輯變得簡單而清晰。

三大原則：

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

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

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

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()幫助器來調用。

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)

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 樹。

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

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

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

前端大統一時代即將來臨？

React項目實戰：環境搭建

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

React項目實戰：登錄頁面（編輯中）