React

React是單向數(shù)據(jù)流,沒有數(shù)據(jù)向上回溯的能力,只能向下分發(fā)

• React中有props和state

props是父級傳過來的屬性

// 父組件
  _hideAddress = () => {
    console.log('o')
  }
  <ModifyAddress
    hideAddress={this._hideAddress}
  />
// 子組件
  <Modal
    onClick={this.props.hideAddress}
  />

state是組件內(nèi)部自行管理的狀態(tài)

  this.state = {
    visible: false,
  }

  this.setState({
    visible: true,
  })

• 隨著業(yè)務(wù)邏輯的增加,就會發(fā)現(xiàn)React無法讓兩個組件之間相互交流,拿到對方的數(shù)據(jù)

• 這個時候就只能將state放到公用的父組件中來管理,然后通過props分發(fā) ==> reducer

• 而子組件去改變父組件的state,只能通過onClick觸發(fā)父組件聲明好的回調(diào),
  也就是說父組件需要提前聲明好函數(shù)或方法描述state將如何改變,再將它作為屬性傳給子組件 ==> action

• 這樣就可以想到一個方法,將所有的state放在頂層統(tǒng)一維護,然后分發(fā)給所有的組件

Redux

Redux就作為一個專業(yè)的頂層將state分發(fā)給所有的組件

• action 聲明式的數(shù)據(jù)結(jié)構(gòu)，只提供事件的所有要素杀赢，不提供邏輯
• Redux 中只需把 action 創(chuàng)建函數(shù)的結(jié)果傳給 dispatch() 方法即可發(fā)起一次 dispatch 過程

// action
const addTodo = (text) = {
    type: 'ADD_TODO',
    text
  }
dispatch(addTodo('new text'))

• reducer 根據(jù)傳入的 當前state 和 action , 返回一個新的 state
• action 只是描述事情發(fā)生了,而沒有說明如何更新state,這就是reducer要做的事情

// 引入action
    import { todoApp } from './actions'
// 初始化 state
    const initialState = {
      text: ''
    }
// 現(xiàn)在可以處理 ADD_TODO力崇。需要做的只是改變 state 中的 text
    const todoApp = (state = initialState, action) = {
      switch (action.type) {
        case 'ADD_TODO':
          return { ...state, text}
        default:
          return state
      }
    }
// 需要注意的是:
// 1. 不要改變state.
// 2. 如果遇到未知的action,返回久的state

• store 通過dispatch(action)來更新state

React-Redux

一般不會直接把這兩個庫直接拿來用,而是用react-redux

react-redux提供一個Provider和connect**

• Provider是一個普通組件,可以作為app的分發(fā)點,只要有store屬性就可以了,他會將state分發(fā)給所有被connect的組件

export default connect(mapStateToProps, mapDispatchToProps)(ComponentName)

• connect先接受兩個參數(shù)數(shù)據(jù)綁定(mapStateToProps)和事件綁定(mapDispatchToprops)再接收一個將要綁定的組件

mapStateToProps 你需要綁定一個函數(shù),它的參數(shù)是state,返回你想要的幾個值

const mapStateToProps = (state) => {
  return {
    newText: state.todoApp.text,
  }
}

mapDispatchToProps 聲明好的action作為回調(diào),它的參數(shù)是dispatch

// 綁定所有action以及參數(shù)的dispatch廉羔，可以作為屬性在組件里面使用
const mapDispatchToProps = (dispatch) => ({
  dispatch
})
// 在組件中使用
this.props.dispatch(action(addTodo()))

最后

有不對的地方還請指出

謝謝啦