web培训吧 关注:1,992贴子:1,737
  • 2回复贴,共1

React16源码解读:揭秘ReactDOM.render

只看楼主收藏回复

React16源码解读:揭秘ReactDOM.render


1楼2020-01-19 09:41回复
    在上一篇文章中我们通过create-react-app脚手架快速搭建了一个简单的示例,并基于该示例讲解了在类组件中React.Component和React.PureComponent背后的实现原理。同时我们也了解到,通过使用Babel预置工具包@babel/preset-react可以将类组件中render方法的返回值和函数定义组件中的返回值转换成使用React.createElement方法包装而成的多层嵌套结构,并基于源码逐行分析了React.createElement方法背后的实现过程和ReactElement构造函数的成员结构,最后根据分析结果总结出了几道面试中可能会碰到或者自己以前遇到过的面试考点。上篇文章中的内容相对而言还是比较简单基础,主要是为本文以及后续的任务调度相关内容打下基础,帮助我们更好地理解源码的用意。本文就结合上篇文章的基础内容,从组件渲染的入口点ReactDOM.render方法开始,一步一步深入源码,揭秘ReactDOM.render方法背后的实现原理,如有错误,还请指出。


    2楼2020-01-19 09:42
    回复
      本系列的源码分析是基于Reactv16.10.2版本的,为了保证源码一致还是建议你选择相同的版本,下载该版本的地址和笔者选择该版本的具体原因可以在上篇文章的准备阶段小节中查看,这里就不做过多讲解了。项目示例本身也比较简单,可以按照准备阶段的步骤自行使用create-react-app快速将一个简单的示例搭建起来,然后我们定位到src/index.js文件下,可以看到如下代码:


      3楼2020-01-19 09:42
      回复