新的一年的第一周get了

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}
/>
```