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 如此厲害的框架，除了優秀的架構和出色的算法，其實也離不開這些普普通通的很好理解的代碼。