React学习——ref，key，PureComponent，bindActionCreator

Posted 2020-12-25 chaoxiz

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