美文网首页
技术乱炖

技术乱炖

作者: 月魂king | 来源:发表于2018-02-08 10:27 被阅读0次
  • 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()方法从一个类似数组或可迭代对象中创建一个新的数组实例,这样就完成了数组的去重工作。

  • 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 中的数据,动态地输出组件需要的(最小)属性。

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

函数的第二个参数 ownProps,是 MyComp 自己的 props。有的时候,ownProps 也会对其产生影响。比如,当你在 store 中维护了一个用户列表,而你的组件 MyComp 只关心一个用户(通过 props 中的 userId 体现)。

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'},要触发这个 action 必须在 store 上调用 dispatch 方法。diapatch 正是 mapDispatchToProps 的第一个参数。但是,为了不让 MyComp 组件感知到 dispatch 的存在,我们需要将 increase 和 decrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 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 之后才会被赋给 MyCompconnect 的第三个参数就是用来做这件事。通常情况下,你可以不传这个参数,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.空字符串

相关文章

  • 技术乱炖

    es6数组去重法 Set对象进行去重,但是返回的是一个对象,需要使用Array.from()方法从一个类似数组或可...

  • 《乱炖》

    清汤熬腿骨,玉髓裹肉酥。 海带色犹深,临秋宜大补。

  • 乱炖

    难得,八点半了,还躺在床上,而且还是在东莞。 “因过竹院逢僧话,偷得浮生半日闲”。难得有时间睡个懒觉,问题是觉却睡...

  • 乱炖

    乱炖是一道东北名菜,就是把各种菜肉放在一起。 今天我家也做乱炖了,舅舅买了:千叶豆腐、土豆、胡萝卜...

  • 乱炖

    我从哪里来?你从哪里来?我们从哪里来?你们从哪里来?他们从哪里来? 万丈深渊 如履平地…我从红尘中来。一个头圆圆顶...

  • 乱炖

    忙了一个月,开始闲下来了,像条死咸鱼一样地度过了毕业后的一年,如今的生活和当初的设想相距甚远,当初的很多约定到现在...

  • 乱炖

    乱炖——东北的一道名菜 汇集各种新鲜食材做出,在社会发展的今天这道菜就算地方的一个特色,然而在中国近代史开端就属于...

  • 乱炖

    最肯忘却古人诗 最不屑一顾是相思 守着爱 怕人笑 又怕人看清 红豆生南国 春来发几枝 愿君多采撷 此物最相思 人生...

  • 乱炖

    光阴似箭真是最贴切的一句词语,回首已经到2019年年末了,这一年的时间我的生活发生了很多变化包括工作和感情。随之而...

  • 乱炖

    一直都喜欢把菜做成五颜六色,总感觉这样生活才更显得丰富多彩。 今天周末,打算做个乱炖解解馋ʘᴗʘ 食材: 鸡翅根、...

网友评论

      本文标题:技术乱炖

      本文链接:https://www.haomeiwen.com/subject/yesgnxtx.html