新的一年的第一周get了

Author Avatar
Peipei Wong 2月 17, 2019
  • 在其它设备中阅读本文章
1. 如何创建xhr拦截器

override xhr的open方法参考链接

let oldXHROpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
  // do something with the method, url and etc.
  this.addEventListener('load', function() {
    // do something with the response text
    console.log('load: ' + this.responseText);
  });

 return oldXHROpen.apply(this, arguments);
}
2. 当参数为object对象时,如果使用默认参数,怎么做?
const spin = ({color: 'red'}) => {}

// use default params
spin();    // error
span({});  // use dedault params

const spin1 = ({color: 'red'} = {}) => {}
spin1();    // use dedault params
span1({});  // use dedault params
3. 布局是[x-y]——[z]时

参考ruby-china中header的样式
z
通常使用flex布局,将x和y作为一部分
但可以看成类似这样的布局[x]-[y]——[z],y的style为margin-right: auto;

4. 如何提交react的性能

参考链接

  • 减少不必要的渲染why-did-you-update
  • 切割组件
  • Recompose
  • Reselect
  • Beware of Object Literals in JSX
    <Cropper
    style={{ maxHeight: 300 }}
    />
    
    上面的code中的{ maxHeight: 300 }在每一次render过程中都是一个新的对象,所以Cropper的render每次都会被执行,可以改成
    const style = { maxHeight: 300 };
    <Cropper
    style={style}
    />