基于React版本16.4的源碼解析（一）

joywek 發布于2019-08-23 10:48 / 2931人閱讀

摘要：本次分析的源碼采用的是的版本核心接口提供了處理的工具集我們先來看看做了什么事情即當為空時，返回不為時調用，最終返回一個數組這里說一下，可以通過傳入的對所有子組件進行操作，具體使用方法看下圖參數通過配合的例子把父組件的賦值給每個子組件我們先不

本次分析的源碼采用的是16.4.1的版本

核心接口

React.Children

提供了處理 this.props.children 的工具集：

map

forEach

count

toArray

only

我們先來看看mapChildren做了什么事情

map: mapChildren

即當children為空時，返回null；
不為null時調用mapIntoWithKeyPrefixInternal，最終返回一個result數組.
這里說一下，可以通過傳入的func對所有子組件進行操作，具體使用方法看下圖參數

通過配合cloneElement的例子：

class RadioGroup extends Component {
    constructor(props){
        super(props);
    }
    renderChildren(props) {
        return React.Children.map(props.children, (child, index) => {
            if (child.type === RadioOption)
                return React.cloneElement(child, {
                    // 把父組件的props.name賦值給每個子組件
                    name: props.name
                })
            return child
        })
    }
    render() {
        return (
            
                {this.renderChildren(this.props)}
            
        )
    }
}

forEach、count、toArray我們先不看，先看下only

only: onlyChild

看注釋就能明白了
這個函數會返回第一個children，同時通過isValidElement判斷是不是唯一的一個，若不是會報錯

因為若只有一個那一定是一個Object對象，否則為一個數組
所以可以通過判斷是否為children是不是一個Object對象
我們來看下函數驗證一下

果然有個一判斷是否為Object的條件，剩下兩個是判斷是否為null和$$typeof是否為element

React.createRef

照舊看下源碼

這里發現用了Object.seal方法來封閉了refObject，即阻止添加新屬性并將所有現有屬性標記為不可配置。當前屬性的值只要可寫就可以改變，這里說下不可變（immutable）對象的幾個好處：

線程安全

易于理解

比可變對象有更高的安全性

createRef是React 16.3 發布的方法
同時還有一個用于高階組件的forwardRef
基本原理是通過劫持ref并且將之轉換成prop實現的
具體使用如下

function HOC(WrappedComponent) {
    class HOC extends React.Component {
        constructor(props){
            super(props);
        }
      render() {
        const {forwardedRef, ...rest} = this.props;
        return ;
      }
    }
    return React.forwardRef((props, ref) => {
        return ;
    });;
}
class Child extends React.Component{
    constructor(props){
      super(props);
    }
    render(){
      return 
    }
}
const LogProps = HOC(Child);

class Father extends React.Component{
    constructor(props){
      super(props);
      this.myRef = React.createRef();
    }
    componentDidMount(){
      console.log(this.myRef.current);
    }
    render(){
      return 
    }
}

React.Component 和 React.PureComponent

這里是Component

這里是PureComponent

這里是ComponentDummy

這里發現setState 和 forceUpdate方法掛在Component下，通過一個ComponentDummy的“偽組件”來當作中介，使PureComponent也能訪問到setState 和 forceUpdate方法。
細心的可能發現這里有個objectAssign方法，這個方法把Component的原型跟PureComponent的原型合并了，也就是說PureComponent和Component共用了一個原型

這里的shouldUseNative()是對原生的assgin方法進行兼容性判斷，我把源碼貼出來，有興趣的可以看看

createFactory: createFactoryWithValidation

createElement: createElementWithValidation

在最后我們可以看到有一個判斷type === REACT_FRAGMENT_TYPE，這個REACT_FRAGMENT_TYPE是一個可以包裹碎片化元素的組件
用React.Fragment包裹碎片化的組件，可以寫作

  <>
    ...
  
  但可能有的編譯器不支持，最好寫作
  
    ...

看到現在都沒發現render方法的蹤影，源碼還沒讀完......

云服務器 GPU云服務器 React 源碼 React源碼 webrtc下載舊版本的源碼 webrtc各個版本的源碼下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96705.html

淺談React Fiber

摘要：因為版本將真正廢棄這三生命周期到目前為止，的渲染機制遵循同步渲染首次渲染，更新時更新時卸載時期間每個周期函數各司其職，輸入輸出都是可預測，一路下來很順暢。通過進一步觀察可以發現，預廢棄的三個生命周期函數都發生在虛擬的構建期間，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段時間準備前端招聘事項...

izhuhaodev 2019-08-26 10:43 評論0 收藏0
捋一捋React的生命周期

摘要：卸載階段組件卸載和銷毀老版生命周期之前的生命周期初始化階段涉及個鉤子函數這些方法會在組件初始化的時候被調用，只跟實例的創建有關。前言：React 的版本從 v15 到 v16.3 ，再到v16.4，現在最新的版本是 v16.8了。其中最大的變化可能是React Hooks的加入，而最令人困惑的卻是它的生命周期，新舊生命周期函數混雜在一起，難免會讓許多新來者有很多困惑。所以這一篇我們來...

MobService 2019-08-23 15:20 評論0 收藏0
React 源碼漂流（一）之起航

摘要：在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前版本號。注意包文件僅僅是的必要的功能性的定義，它必須要結合一起使用下是，原生環境下是。在前端開發過程中，源碼解讀是必不可少的一個環節，我們直接進入主題，注意當前 React 版本號 16.8.6。注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結合 React...

Mr_zhang 2019-08-26 10:20 評論0 收藏0
精讀《React16 新特性》

摘要：引言于發布版本，時至今日已更新到，且引入了大量的令人振奮的新特性，本文章將帶領大家根據更新的時間脈絡了解的新特性。其作用是根據傳遞的來更新。新增等指針事件。 1 引言于 2017.09.26 Facebook 發布 React v16.0 版本，時至今日已更新到 React v16.6，且引入了大量的令人振奮的新特性，本文章將帶領大家根據 React 更新的時間脈絡了解 React1...

Nosee 2019-08-23 13:58 評論0 收藏0
scheduler 源碼

摘要：布爾型，表示該幀里面沒有執行回調，超時了。這一處理機制在監聽函數中實現作為，接受消息的時機將隨著線程的空閑程度起變化。為什么是要有scheduler 首先要從js的是單線程模型來說起,Javascript執行是會經歷靜態編譯，動態解釋和事件循環做任務調度的過程，大致的流程如下(注意，該流程是以chrome瀏覽器內核為標準的執行流程，在node或者其他瀏覽器中，執行流程會有所差異，但是...

SillyMonkey 2019-08-23 15:54 評論0 收藏0