NIUCLOUD是一款SaaS管理后台框架多应用插件+云编译。上千名开发者、服务商正在积极拥抱开发者生态。欢迎开发者们免费入驻。一起助力发展! 广告
**一、 实现深拷贝** ``` function cloneDeep(obj) { let _obj = {}; let getType = item => Object.prototype.toString.call(item).slice(8, -1); if (getType(obj) == 'Function') return eval(`(${obj.toString()})`); if (getType(obj) != 'Object' && getType(obj) != 'Array') return obj; for (const key in obj) { console.log(getType(obj[key])); if (getType(obj[key]) != 'Object' || getType(obj[key]) != 'Array') _obj[key] = cloneDeep(obj[key]); else if (getType(obj[key]) == 'Function') _obj[key] = eval(`${obj[key].toString()}`); else _obj[key] = obj[key]; } return _obj } ``` **二、实现new** ``` function _new2(fn, ...arg) { // 这一句话只是构造了一个对象,这个对象的__proto__=== fn.prototype var obj = Object.create(fn.prototype) // 并没有给这个对象赋值,将fn的this对象设置为obj // call 是列表, apply是数组 const ret = fn.call(obj, ...arg) // 为啥这里需要判断一下ret,根据new的定义,如果构造函数没有返回一个对象,那么返回this对象,this当前就是obj return ret instanceof Object ? ret : obj } ``` ** 三、 简单讲解一下 http2 的多路复用** ``` HTTP2采用二进制格式传输,取代了HTTP1.x的文本格式,二进制格式解析更高效。 多路复用代替了HTTP1.x的序列和阻塞机制,所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中,并发多个请求需要多个TCP连接,浏览器为了控制资源会有6-8个TCP连接都限制。 HTTP2中 * 同域名下所有通信都在单个连接上完成,消除了因多个 TCP 连接而带来的延时和内存消耗。 * 单个连接上可以并行交错的请求和响应,之间互不干扰 ``` **四、 React 中 setState 什么时候是同步的,什么时候是异步的?** 如果是通过`DOM 事件`(例如:onClick) 的`事件处理函数`调用了 setState 函数,导致 React 进行更新(或者说“调度”scheduleWork),则此时`事件处理函数`中的 setState 的行为是异步的(也就是合并更新)。 上面的评论中说了很多 setState “异步”的情况。我这里补充一下“同步”的情况,下面的例子使用了 setTimeOut,组件最后显示结果是`33` ~~~js class App extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleAddCount = this.handleAddCount.bind(this); } componentDidMount() { setTimeout(this.handleAddCount, 1*1000); } handleAddCount() { this.setState({ count: this.state.count + 11 }); this.setState({ count: this.state.count + 22 }); } render() { return <div>{this.state.count}</div>; } } ~~~ ### 源码: 从源码的角度来说,setState 的行为是“异步”还是“同步”取决于 React 执行 setState 方法时的`执行上下文`①(ExecutionContext)。 如果 ExecutionContext 为 0,表示当前没有正在进行的其他任务,则 setState 是“同步”的。React 源码地址:[https://github.com/facebook/react/blob/b53ea6ca05d2ccb9950b40b33f74dfee0421d872/packages/react-reconciler/src/ReactFiberWorkLoop.js#L411](https://github.com/facebook/react/blob/b53ea6ca05d2ccb9950b40b33f74dfee0421d872/packages/react-reconciler/src/ReactFiberWorkLoop.js#L411) ①注意这里的`执行上下文`不是浏览器的,为了更好的控制渲染任务,避免长时间占用浏览器的主线程, React 实现了自己的`执行上下文`。 五、