React学习(3)——ref,key,PureComponent,bindActionCreator

2018/07/25 18:18
阅读数 11

ref

如果在html里设置ref那么它就指向这个真实的DOM节点。

如果在组件里设置ref,那么它就指向这个组件实例的引用,和组件里面的this互等。

我们经常在表单input,select里使用,获取其value,如: this.refs.ad.value 。

key

一个组件,可能会调用很多次,

比如在ul里有很多个li

为了区分各个Li实例,一般我们使用map方法给li循环加上唯一的key,方便以后如果数据修改了可以快速更新。

PureComponent

作用:用于提高react性能

方法:当组件更新时,若props和state未改变,则render方法不触发。

原理:React 自动做了一层浅比较:

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

shallowEqual 比较 Object.keys(state | props) 的长度是否一致,每一个 key 是否两者都有,并且是否是一个引用,但只比较了第一层的值,确实很浅,所以深层的嵌套数据是对比不出来的。

使用:只要把继承类从 Component 换成 PureComponent 即可。

注意:1.  易变数据不能使用一个引用

      2. 不变数据使用一个引用

      3. 复杂状态与简单状态不要共用一个组件

bindActionCreator:

返回包裹dispatch的函数,以直接使用。

相当于会dispatch这个action。

参数:
1、actionCretors ,对象或单个函数
2、dispatch函数

返回:

1、若传入的参数是函数,则直接返回一个包裹dispatch的函数
2、若传入的参数是object,则根据相应的key,生成包裹dispatch的函数

例子:

传入参数为函数:

const toggleTodo = (id) => {
    return {
        type: 'TOGGLE_TODO',
        id
    };
};

export { toggleTodo };
let boundActionCreators = bindActionCreators(toggleTodo, dispatch);

//此时boundActionCreators  = (id) => dispatch(toggleTodo(id));

传入参数为object:

// 假设下面的actionCreator.js 我们import进来这个对象

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}
 // 得到的对象为

{
   addTodo : text => 
    { 
      type: 'ADD_TODO',
      text
    },
   removeTodo : id => {
      type: 'REMOVE_TODO',
      id
    }
}
// 经过bindActionCreator就会变成

{
   addTodo : text => dispatch(addTodo('text'));
   removeTodo : id => dispatch(removeTodo('id'));
}

 

 

参考:

http://www.wulv.site/2016-08-16/react%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.html

http://www.wulv.site/2017-07-02/react-perf-code.html

https://wulv.site/2017-05-31/react-purecomponent.html

https://segmentfault.com/a/1190000011783611

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部