原创 React源碼解析之setState和forceUpdate
一、enqueueSetState()非異步方法中，無論調用多少個setState，它們都會在最後一次setState後，放入更新隊列，然後執行一次統一的更新，詳情請參考：React.setState之state批處理的機制 和 爲什麼R
2019-09-09 09:15:01
原创 React源碼解析之ExpirationTime
一、ExpirationTime的作用在React中，爲防止某個update因爲優先級的原因一直被打斷而未能執行。React會設置一個ExpirationTime，當時間到了ExpirationTime的時候，如果某個update還未執行
2019-08-31 19:25:03
原创 React源碼解析之RootFiber
一、Fiber的含義和作用（1）每一個ReactElement對應一個Fiber對象 （2）記錄節點的各種狀態比如ClassComponent中的state和props的狀態就是記錄在Fiber對象上的。 只有當Fiber對象更新後，纔會
2019-08-19 21:35:01
原创 React源碼解析之ReactDOM.render()
一、React更新的方式有三種：（1）ReactDOM.render() || hydrate（ReactDOMServer渲染）（2）setState（3）forceUpdate 接下來，我們就來看下ReactDOM.render()源
2019-08-14 09:14:58
10
原创 React源碼解析之React.children.map()
一、例子 function ChildrenDemo(props) { console.log(props.children, 'children30'); console.log(React.Children.map(props
2019-08-04 18:55:01
5
原创 React源碼解析之React.createContext()
前言：由於childContext在React17中會被廢棄，所以不去分析它了，主要是新 API— —createContext()的講解 一、React.createContext() 作用：方便祖先組件與後代組件（中間隔了好多層組件）
2019-07-29 22:25:01
原创 React源碼解析之React.createRef()/forwardRef()
一、React.createRef()GitHub：https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src/R
2019-07-27 20:48:35
7
原创 React源碼解析之React.Component()/PureComponent()
一、React.Component() GitHub：https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src
2019-07-17 09:14:59
原创 React源碼解析之React.createElement()和ReactElement()
一、JSX語法轉換到Js語法從 JSX 轉換到 JS 會用到React.createElement()，所以先熟悉下 JSX 到 JS 的轉換。 這邊是 JSX 語法： <div id='one' class='two'> <sp
2019-07-14 18:55:04
1
原创 JS紅皮書解讀之防篡改對象
前言：去年7月份在簡書寫的，發現後端、React中也有體現，覺得有必要在微信上分享下。 注意：一旦把對象定義爲防篡改，就無法撤銷了。 1.不可擴展對象擴展指可以給對象添加屬性和方法。 使用Object.preventExtensions(
2019-07-13 22:55:09
原创 淺談下垃圾回收機制（1）
前言：垃圾回收機制在工作中很少碰到，看到阮一峯的書中有寫，記錄下。 垃圾回收機制與WeakSet（1）垃圾回收機制只考慮對象的強引用（2）垃圾回收機制依賴「引用計數」，當計數爲0，則GC自動回收該對象佔用的內存。（3）當忘記取消引用（a=
2019-07-13 18:54:59
原创 jQuery源碼解析系列一目錄
起初選擇先看jQuery源碼而不是react的原因也簡單：jQuery作爲每個前端會用的第一個框架，雖然過時，但卻又如此普及，所以想看看它是咋設計的。 從 2019.3.22 到 2019.07.01，前前後後寫了 27 篇文章，但由於j
2019-07-04 13:15:00
原创 jQuery之模擬實現$().animate()（下）
前言：在上篇的基礎上，接入doAnimation() 邏輯圖： 實現： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery之$
2019-07-01 09:14:58
原创 jQuery之模擬實現$().animate()（上）
根據上圖實現除doAnimation外的邏輯： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery之$().animate()
2019-06-29 17:55:05
原创 jQuery源碼解析之$().animate()（下）
三、doAnimation內部的Animation()方法作用：$().animate()核心方法 源碼： //animate()核心方法 //源碼7844行 //elem:目標元素 //this:目標元素 //{'w
2019-06-27 10:55:16
6