react源碼解析 1 基礎

本文是看視頻後進行的技術總結筆記，原視頻技術總結文檔直接點擊 React源碼解析文檔參考- https://react.jokcy.me/

react16

• react16的更新徹底重寫核心代碼，升級不用調兼容
• 引入fiber，從根本上解決js單線程運行若是計算量太大致使的動畫卡幀和交互卡頓的問題

內容設計

1. react簡單api
2. react更新建立 update
3. fiber Scheduler 調度器
4. 各類不一樣的組件如何更新
5. 完成各個節點更新的操做
6. 提交更新
7. context、ref、hydrate、事件體系的實現
8. Suspense
9. hooks

React 原理最核心部分

• 更新機制
• 什麼是 Fiber 以及做用
• React 實現路更新任務的調度 和如何實現的

React 的調度過程

React 渲染更新的過程

基礎

React Api

下面是 react暴露出來的api
React 頂層 API 官方文檔連接

const React = {
    Children: {
        map,
        forEach,
        toarray,
        only,
    },
    
    createRef,
    Component,
    PureComponent,
    
    createContext,
    forwardRef,
    
    
    Fragment: REACT_FREGMENT_TYPE,
    StrictMode: REACT_STRICT_TYPE,
    unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,
    unstable_Profiler: REACT_PROFILER_TYPE,
    
    createElemnt: _DEV_ ? createElmentWithValidation : createElment,
    cloneElemnt:  _DEV_ ? cloneElmentWithValidation : cloneElment,
    createFactory:  _DEV_ ? createFactoryWithValidation : createFactory,
    isValidElemnt:  isValidElemnt,
    
    version: ReactVersion,
    
    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
}
複製代碼

ReactElement

ReactElement 經過 createElement建立 調用該方法須要傳入的三個參數：

• type
• config
• children

type是指 reactELement的類型

• 字符串 好比 div p 表明原生DOM，稱爲 HostComponent
• 繼承自Component或者PureComponent 被稱爲ClassComponent
• function Componennt
• 原生提供的Fragment，AsyncMode等Symbol，會被特殊處理
• TODO：是否有其餘類型

點擊 打開下文代碼片斷在線編譯

export function createElement(type, config, children) {
  // 處理參數
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props
  );
}
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely indentify this as React elemnt
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for crateing elment
    _owner: owner
  };

  return element;
};

複製代碼

React Children

點擊 打開下文代碼片斷在線編譯

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class IgnoreFirstChild extends React.Component {
  render() {
    const children = this.props.children
    return (
      <div> <div>IgnoreFirstChild 組件</div> {React.Children.map(children, (child, i) => { // Ignore the first child if (i < 1) return return child })} </div>
    )
  }
}

ReactDOM.render(
  <div> <IgnoreFirstChild > <div>first child</div> <div>second child</div> <div>third child</div> </IgnoreFirstChild > </div>, document.getElementById('container'), ); 複製代碼

效果圖: