react 源碼defaultProps實作

首先我們回顧一下 defaultProps 的用法

import React from 'react';
 
class App extends React.Component {
  render() {
    return <div>{this.props.name}</div>
  }
}
 
App.defaultProps = {
  name: "Hello React"
};
 
ReactDOM.render(<App />, document.getElementById('root'));
           

這樣我們就可以得到一個渲染出Hello React的界面啦。

此時的關鍵，在于需要了解 ReactDOM.render 實際執行了什麼方法。

經過

斷點調試

，我們可以清晰的看到

代碼從

ReactDOM.render(<App />, document.getElementById('root'))
           

到

React.createElmentWithValidation(type, props, children)
           

由于 createElementWithValidation 并不是我想了解的重點，簡要看了一下，大概執行了以下3步。

判斷第一個參數（示例代碼中的 是否是有效元素 ）, 如果不正确，你就會看到 React.createElement: type is invalid , 這個熟悉又親切的報錯

執行 React.createElement(type, props, children)

檢查元素的 props 是否符合 propTypes 的約定

其中對我們了解defaultProps有幫助的是第2步，React.createElement

我們可以看到在源碼位址的第221行中，寫着清晰的注釋 Resolve default props 。

// Resolve default props
if (type && type.defaultProps) {
  const defaultProps = type.defaultProps;
  for (propName in defaultProps) {
    if (props[propName] === undefined) {
      props[propName] = defaultProps[propName];
    }
  }
}
           

通過剛才的分析，我們可以知道上文代碼中的 type 正是 App 對象。是以這裡對 type.defaultProps 使用，就豁然開朗了。

根據這段代碼，我們更加可以印證，上一篇文章中提到多餘的 defaultProps 确實會對代碼的性能造成影響。

因為當 type.defaultProps 存在時，是需要對其進行周遊的。

是以如果你的檔案中存在很多處這種無效的代碼，雖然并不會對界面産生任何影響，但是确實影響了代碼的品質。

總結

勿以善小而不為，勿以惡小而為之。注意自己的實作細節，提高代碼品質。

React 如此厲害的架構，除了優秀的架構和出色的算法，其實也離不開這些普普通通的很好了解的代碼。