这是8月最后一篇文章 明天转移阵地了
- 一段代码学习一下事件循环12345678910111213141516171819202122function someAsyncOperation(callback) {// Assume this takes 95ms to completefs.readFile("./index.js", callback);}const timeoutScheduled = Date.now();someAsyncOperation(() => {const startCallback = Date.now();// do something that will take 10ms...while (Date.now() - startCallback < 1180) {// do nothing}});// process.nextTick(() => console.log("process next tick"));// promise 都是微任务setTimeout(() => {const delay = Date.now() - timeoutScheduled;console.log(`${delay}ms have passed since I was scheduled`);// 打印 1180}, 100);
以上定时器被异步回调阻塞了,需要注意的是 在主线和事件循环的每个阶段完成后,会立刻运行微任务回调。
- 学习一下react hoc的ref如何转发12345678910111213141516171819202122232425function hoc(Cmp) {class Wrapped extends Component {render() {const { forwardedRef, ...rest } = this.props;return <Cmp {...rest} forwardedRef={forwardedRef} />;}}return React.forwardRef((props, ref) => <Wrapped {...props} forwardedRef={ref}/>)}const Test: React.FunctionComponent<any> = ({ forwardedRef }) => {return <div ref={forwardedRef} className="block" />;};const DecratorCmp = hoc(Danc);class App extends Component {ref = React.createRef<HTMLelement>();render() {<DecratorCmp ref={this.ref}/>}}// https://stackoverflow.com/questions/53849369/react-forwardref-hoc-not-giving-reference-to-container-element
确实有点复杂, 实际操作中还是慎用
- 学习一下eventsource12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061621. It only allows data reception from the server (unidirectional)2. Events are limited to UTF-8 (no binary data)// handle imformation flowing from server to clientconst nests = [1,2,3]let clients = [];function eventsHandler(req, res, next) {// Mandatory headers and http status to keep connection openconst headers = {'Content-Type': 'text/event-stream','Connection': 'keep-alive','Cache-Control': 'no-cache'};res.writeHead(200, headers);// After client opens connection send all nests as stringconst data = `data: ${JSON.stringify(nests)}\n\n`;res.write(data);const clientId = Date.now();const newClient = {id: clientId,res};clients.push(newClient);// eventsource关闭了req.on('close', () => {console.log(${clientId} Connection closed);clients = clients.filter(c => c.id !== clientId);});}function sendEventsToAll(newNest) {clients.forEach(c => c.res.write(data: ${JSON.stringify(newNest)}\n\n))}async function addNest(req, res, next) {const newNest = req.body;nests.push(newNest);// Send recently added nest as POST resultres.json(newNest)// Invoke iterate and send functionreturn sendEventsToAll(newNest);}app.get('/events', eventsHandler);app.post('/nest', addNest);// 客户端代码const events = new EventSource('http://localhost:3000/events');evtSource.onmessage = function(e) {var newElement = document.createElement("li");newElement.textContent = "message: " + e.data;eventList.appendChild(newElement);};// 关闭连接button.onclick = function() {console.log('Connection closed');evtSource.close();};
eventsource是服务端单向推送 客户端不能向服务端发消息 不能发送二进制
- buffer的read操作12345678910111213const buf = Buffer.from('abc');console.log(buf4.readUInt8(0)); // 97console.log(buf4.readUInt8(1)); // 98const buf1 = Buffer.from([1, 3, 2, 1]);console.log(buf1.readIntBE(0, 1)) // 1console.log(buf1.readIntBE(0, 2)) // 259 1*256 + 3console.log(buf1.readIntBE(0, 3)) // 66306 1*256*256 + 3*256 + 2console.log(buf1.readInt16BE(0)); // 259 1*256 + 3console.log(buf1.readInt32BE(0)); // 66306 1*256*256 + 3*256 + 2console.log(buf1.readIntLE(0, 3)) // 1 + 256*3 + 256*256*2// readIntLE是 readIntBE反着过来的
就到这里了