react 源码defaultProps实现

首先我们回顾一下 defaultProps 的用法

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

这样我们就可以得到一个渲染出Hello React的界面啦。

此时的关键，在于需要理解 ReactDOM.render 实际执行了什么方法。

经过断点调试，我们可以清晰的看到

代码从

ReactDOM.render(, 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 如此厉害的框架，除了优秀的架构和出色的算法，其实也离不开这些普普通通的很好理解的代码。