React 學習筆記(二)

時間 2019-12-12

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

這篇學習主要是圍繞`Redux`展開的..

宇宙慣例..github地址 ⭐⭐⭐react

Redux

Redux和React不要緊 redux也能夠用在其餘框架裏甚至是原生的js代碼也能夠用git
Redux的工做流程github
- 先上一圖流(字醜莫介意..orz)
- 先作好各類初始化工做例如安裝好Redux , 組件中引入 store 並定義好各個文件的配置 store.getState() 和當前state作綁定在此不過多贅述了
- ```
//例如
// store.index.js中 (store)
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(
  reducer
)


//reducer.js中

//默認值
const defaultState = {
  value: ''
}
export default = ( state = defaultState, action )=>{
  return state
}
複製代碼
```
1. 組件中定義一個action的對象
- 一般爲了更便於維護和管理咱們將要用到的action對象拆分紅一個單獨的 actionCreators.js文件裏面是一個一個的返回一個對象的函數返回的對象有如下屬性
  - type: 用於以後檢測的標識值
  - 要傳遞更改的數據
```
//例如
//actionCreators.js中定義
export const getChangeAction = (value) => ({
  type : 'change_value',
  value
})
//組件中定義實際要用的action對象
import { getChangeAction } from './store/actionCreators'
const action = getChangeAction('testValue) 複製代碼
```
1. 組件中將定義好的action對象經過 store.dispatch()方法將其派發出去
```
//例如
store.dispatch(action)
複製代碼
```
1. reducer.js
  - 在 reducer.js 函數中利用以前定義好的action.type對傳遞來的對象進行攔截
  須要注意的是在進行數據的更改時 reducer裏不能進行原始數據的更改只能將數據進行一次深拷貝將拷貝下來的數據更改而後再返回給store 讓它對數據進行更新ajax
```
//例如
export default = ( state = defaultState, action )=>{
  if( action.tyle === 'change_value' ){
    const newState = JSON.parse(JSON.stringify(state))
    newState.value = action.value
    return newState
  }
  return state
}
複製代碼
```
1. 到目前爲止數據以及更新完畢可是視圖層尚未更新因此咱們如今應該去更新視圖層須要在組件裏調用 store.subscribe()這個方法用來監聽store裏數據的變化同時接受一個函數做爲參數, 若是store發生變化就調用傳進去的那個函數因此咱們能夠這麼寫
```
//在constructor裏

//不要忘記更改this指向
this.handleStoreChange = this.handleStoreChange.bind(this)
store.subscribe(this.handleStoreChange)

//handleStoreChange函數
handleStoreChange(){
  this.setState(store.getState())
}      
複製代碼
```
大功告成redux

react-reduxbash

react-redux也是用來作數據管理的只不過是利用了react自己的一些特性, 由於react是單向數據流因此咱們索性把store集成到全部組件的頂層組件裏, 即頂層的 props裏
Provider 上作關聯鏈接 store 內部組件均可以獲取store上的內容了

//入口文件中 (index.js)
import { Provider } from 'react-redux'
const App = (
  <Provider store={store} >
    <TodoList/>
  </Provider>
)

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

複製代碼

子組件經過 connect 獲取
- connect的第二個括號就是組件自己第一個口號裏須要兩個參數這兩個參數都是兩個函數兩個映射關係

//組件中
//state 是 store裏的數據
// 這個映射的規則就是 把 store裏的數據映射到當前的props上
const mapStoreStateToProps = (storeState) => {
  return {
    inputValue : storeState.inputValue
  }
}

// store.dispatch 掛到 當前的props上
const mapStoreDispatchToProps = (storeDispatch) => {
  return {
    changeInputValue(e){
      const action = {
        type : 'change_input_value',
        value: e.target.value
      }
      storeDispatch(action)
    }
  }
}

export default connect(mapStoreStateToProps , mapStoreDispatchToProps)(TodoList);
複製代碼

Redux-thunk 中間件框架
- 這個中間件使得咱們能夠在action裏返回一個函數使得一些異步操做好比獲取ajax請求能夠從組件中抽離出去

// 使用了 redux-thunk 後 action不單單隻能是一個對象了 還能夠是一個函數
export const getTodo =  () =>{
  // 返回的函數中的第一個參數就是dispatch方法
  return (dispatch) =>{
    $.get('something..').then(res=>{
      console.log(res)
    }).catch(()=>{
      console.log('error');
    })
  }
}
複製代碼

因爲在 `action` 和 `store`之間是經過 `dispatch`這個方法來進行溝通的 , 因此`redux-thunk`這個中間件實際上就是對`dispatch`的一個封裝, 或者一個升級, 最原始的`dispatch`只能返回一個對象 而後再把這個對象返回給`store`, 使用了 `redux-thunk`以後, 咱們能夠傳給`dispatch`一個函數 , 他就會先自動執行一遍這個函數, 執行完了以後 再將處理後或者執行完函數後的結構返回給store<br/>
一圖流, `midWare`就是中間件處理的位置
複製代碼

還有不少其餘中間件就不一一枚舉了..

組件分類

UI組件與容器組件 (傻瓜組件和聰明組件)
UI組件只負責樣式
例如將demo用的 todolist拆分

const TodoListUI = (props) =>{
  return (
    <div style={{ margin: " 0 auto ", width: "400px", paddingTop: "150px" }}>
      <div style={{ margin: "10px" }}>
        <Input
          placeholder="todo"
          value={props.inputValue}
          style={{ width: "300px", marginRight: "10px" }}
          onChange={props.handleInputChange}
        />
        <Button onClick={props.handleBtnClick} type="primary">提交</Button>
      </div>
      <List
        style={{ margin: "10px", width: "300px" }}
        bordered
        dataSource={props.list}
        header='todo'
        renderItem={(item,index )=> <List.Item onClick={()=>{props.handleItemClick(index)}}>{item}</List.Item>}
      />
    </div>
  )
}
更多詳情見 github.. todolist2.0裏面的代碼
複製代碼