git-blog
git-blog copied to clipboard
luke93h
前一篇讲了如何从获取父元素实例方法，本篇来介绍下如何从dom上获取fiber实例。 ```jsx import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends React.Component { constructor(props) { super(props); this.state = { a: 1 }; } add = ()...
最近看到一个问题，虽然没遇到过使用场景，但觉得以后说不定能用上，此处记录一下。问题如下： 如果线上代码出了问题，需要代码回滚到之前的某次提交，应该如何操作？ 方法一，revert： ```bash git revert HEAD git push origin master ``` 方法二，reset： ```bash git reset --hard HEAD^ git push origin master -f ``` 方法三：回滚某次提交 ```bash # 找到要回滚的commitID git log...
## HTML5新增了哪些内容或API - 新增api：Geolocation、Canvas/WebGL、webWorker、Audio/Video等等 - 新增标签：HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似和标签，但有一定含义，例如（网站导航块）和``和标记。 ## input和textarea的区别 - input: 单行输入，值为value - textarea： 多行输入，值为children ## flex布局-弹性布局 - 容器的属性 1. flex-direction: row | row-reverse | column | column-reverse，主轴方向 2. flex-wrap:...
最近在开发时遇到了这样一个问题，vscode是有模块跳转的功能的（一般为ctrl+左击或alt+左击），但是在设置了webpack的路径别名之后这个功能失效了。 网上查了资料后，找到了解决方式如下： 1. 在项目根位置创建一个jsconfig.json 2. 配置jsconfig.json ```jsx { "include": [ "./src/**/*" ], "compilerOptions": { "baseUrl": ".", "paths": { "components/*": ["src/components/*"], "utils": ["src/utils/utils.js"], }, } } ``` 3. 重启ide，搞定！
# react源码分析-事件系统分析  ## 目录 - [前言](#前言) - [注册](#注册) - [trapBubbledEvent](#trapBubbledEvent) - [触发](#触发) - [dispatchInteractiveEvent](#dispatchInteractiveEvent) - [dispatchEvent](#dispatchEvent) - [handleTopLevel](#handleTopLevel) - [runExtractedEventsInBatch](#runExtractedEventsInBatch) - [SyntheticEvent](#SyntheticEvent) - [traverseTwoPhase](#traverseTwoPhase) - [executeDispatchesInOrder](#executeDispatchesInOrder) ## 前言 在开发react项目时，是否有过这样的困惑：...
# react源码分析-setState分析  ## 前言 是否有过这样的疑问： 1. setState做了什么？ 2. setState是如何触发ui变化的？ ## isWorking 如果此时isWorking为true，react将不会立即执行更新操作，而是把更新操作交给正在working的任务。（例如：由onClick触发的working） 如果此时没有其他任务在执行，则自己主动申请执行任务（如setTimeout或ajax触发） ## 结尾语 没错，setState的逻辑就是这么简单。 ## 相关 - [事件系统分析](https://github.com/luke93h/git-blog/issues/10) - [setState分析](https://github.com/luke93h/git-blog/issues/11)
# react源码分析-ReactDom.render流程总览  ## 目录 - 前言 - [背景](#背景) - [优化内容](#优化内容) - [初始阶段](#初始阶段) - [jsx](#jsx) - [ReactDom.render](#ReactDom.render) - [legacyCreateRootFromDOMContainer](#legacyCreateRootFromDOMContainer) - [Fiber](#Fiber) - [规划阶段](#规划阶段-scheduleWork) - [ExpirationTime](#ExpirationTime) - [priority](#priority) - [调和阶段](#调和-reconciliation) -...
# Event Loop 虽说目前chrome已经支持worker，js可以多线程运行了，但webworker仅仅能进行计算任务，不能操作DOM，所以本质上还是单线程。 ## 线程 1. js运作在浏览器中,是单线程的，即js代码始终在一个线程上执行，这个线程称为js引擎线程。 2. 浏览器是多线程的，除了js引擎线程，它还有： UI渲染线程、浏览器事件触发线程、http请求线程、EventLoop轮询的处理线程... 3. 多线程之间会共享运行资源，浏览器端的js会操作dom，多个线程必然会带来同步的问题，所有js核心选择了单线程来避免处理这个麻烦。js可以操作dom，影响渲染，所以js引擎线程和UI线程是互斥的。这也就解释了js执行时会阻塞页面的渲染。 ## 同步任务 在主线程排队支持的任务，前一个任务执行完毕后，执行后一个任务,形成一个执行栈，线程执行时在内存形成的空间为栈，进程形成堆结构，这是内存的结构。 ## 异步任务 异步任务会被主线程挂起，不会进入主线程，而是进入消息队列，而且必须指定回调函数，只有消息队列通知主线程，并且执行栈为空时，该消息对应的任务才会进入执行栈获得执行的机会。 ## js运行机制 1. 所有同步任务都在主线程上执行，形成一个执行栈。 2. 主线程之外，还存在一个”任务队列”。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。 3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。 4. 主线程不断重复上面的第三步。 ##...
相信各位第一次接触redux时，都会被redux各种新概念给吓一跳吧。文档又是那么的长，相比于文档，redux源码就要友好很多了，突出一个精简。 ## 目录 - [createStore](#createStore) ### createStore 首先从redux的核心函数，createStore来分析 ```jsx export default function createStore(reducer, preloadedState, enhancer) { let currentReducer = reducer let currentState = preloadedState let currentListeners = [] let nextListeners...