技術亂燉

  • es6數組去重法
var arr = [1, 1, 1, 2, 3, 4, 4, 5, 6, 6, 7];
console.log(new Set(arr));  // 會輸出{1, 2, 3, 4, 5, 6, 7};
console.log(Array.from(new Set(arr)));
// 最后會輸出[1, 2, 3, 4, 5, 6, 7];

Set對象進行去重,但是返回的是一個對象,需要使用Array.from()方法從一個類似數組或可迭代對象中創(chuàng)建一個新的數組實例,這樣就完成了數組的去重工作。

  • dva connect用法
connect() 接收四個參數,它們分別是 mapStateToProps,mapDispatchToProps,mergeProps和options。

mapStateToProps(state, ownProps) : stateProps
這個函數允許我們將 store 中的數據作為 props 綁定到組件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}

這個函數的第一個參數就是 Redux 的 store,我們從中摘取了 count 屬性。因為返回了具有 count 屬性的對象,所以 MyComp 會有名為 count 的 props 字段。

class MyComp extends Component {
  render(){
    return <div>計數:{this.props.count}次</div>
  }
}

const Comp = connect(...args)(MyComp);

當然,你不必將 state 中的數據原封不動地傳入組件,可以根據 state 中的數據,動態(tài)地輸出組件需要的(最小)屬性。

const mapStateToProps = (state) => {
  return {
    greaterThanFive: state.count > 5
  }
}

函數的第二個參數 ownProps,是 MyComp 自己的 props。有的時候,ownProps 也會對其產生影響。比如,當你在 store 中維護了一個用戶列表,而你的組件 MyComp 只關心一個用戶(通過 props 中的 userId 體現(xiàn))。

const mapStateToProps = (state, ownProps) => {
  // state 是 {userList: [{id: 0, name: '王二'}]}
  return {
    user: _.find(state.userList, {id: ownProps.userId})
  }
}

class MyComp extends Component {
  
  static PropTypes = {
    userId: PropTypes.string.isRequired,
    user: PropTypes.object
  };
  
  render(){
    return <div>用戶名:{this.props.user.name}</div>
  }
}

const Comp = connect(mapStateToProps)(MyComp);

state 變化,或者 ownProps 變化的時候,mapStateToProps 都會被調用,計算出一個新的 stateProps,(在與 ownProps merge 后)更新給 MyComp。

這就是將 Redux store 中的數據連接到組件的基本方式。

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二個參數是 mapDispatchToProps,它的功能是,將 action 作為 props 綁定到 MyComp 上。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

class MyComp extends Component {
  render(){
    const {count, increase, decrease} = this.props;
    return (<div>
      <div>計數:{this.props.count}次</div>
      <button onClick={increase}>增加</button>
      <button onClick={decrease}>減少</button>
    </div>)
  }
}

const Comp = connect(mapStateToProps, mapDispatchToProps)(MyComp);

由于 mapDispatchToProps 方法返回了具有 increase 屬性和 decrease 屬性的對象,這兩個屬性也會成為 MyComp 的 props。

如上所示,調用 actions.increase() 只能得到一個 action 對象 {type:'INCREASE'},要觸發(fā)這個 action 必須在 store 上調用 dispatch 方法。diapatch 正是 mapDispatchToProps 的第一個參數。但是,為了不讓 MyComp 組件感知到 dispatch 的存在,我們需要將 increase 和 decrease 兩個函數包裝一下,使之成為直接可被調用的函數(即,調用該方法就會觸發(fā) dispatch)。

Redux 本身提供了 bindActionCreators 函數,來將 action 包裝成直接可被調用的函數。

import {bindActionCreators} from 'redux';

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  });
}

同樣,當 ownProps 變化的時候,該函數也會被調用,生成一個新的 dispatchProps,(在與 statePropeownProps merge 后)更新給 MyComp。注意,action 的變化不會引起上述過程,默認 action 在組件的生命周期中是固定的。

[mergeProps(stateProps, dispatchProps, ownProps): props]

之前說過,不管是 stateProps 還是 dispatchProps,都需要和 ownProps merge 之后才會被賦給 MyComp。connect 的第三個參數就是用來做這件事。通常情況下,你可以不傳這個參數,connect 就會使用 Object.assign 替代該方法。
轉載自http://taobaofed.org/blog/2016/08/18/react-redux-connect/

  • False等效值
    1.false 2. undefined 3. null 4.0 5. NaN 6.空字符串
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容