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

巴特西

React学习（3）——ref，key，PureComponent，bindActionCreator

ref

key

PureComponent

bindActionCreator：

最新文章

热门文章