「React源码分析」一. React开源项目概览

2021SC@SDUSC

React简介

正如React项目官网所说，React是一个「用于构建用户界面的 JavaScript 库」。人们往往也会将React与Vue、Angular作为前端三大框架进行对比（但如今Angular的热度也越来越小了，而前两者的社区规模和热度仍在不断发展壮大）。React相对其他前端框架（说前端框架其实并不准确，因为React早已不再单纯地面向“前端”，本身也并不是所谓的“框架”）来说，不仅写法上更灵活，语法也更贴近ES标准，对Typescript也有着更好的支持。

同时，React本身在整体架构设计上更有优势，React日益庞大而成熟的技术栈便是得益于此。在浏览器端有我们有 ReactDOM 把React应用渲染在WEB页面，React 还可以使用 Node 进行服务器渲染（SSR），在小程序端也有Taro直接将React代码编译成对应的小程序，在原生 IOS 和 Android 平台更有React Native来帮助我们使用 React 来创建 Android 和 iOS 的原生应用。可以说，React已经真正做到了「一次学习，随处编写」。在之后的分析中我们也可以深入体会到这一点。

让我们先看一看React的代码，体会一下神奇的React是如何工作的：

class HelloMessage extends React.Component {
   
  render() {
   
    return (
      <div>
        Hello World!
      </div>
    );
  }
}

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

这样的代码可以在html页面中id为root的节点上挂载我们的React应用，在其中显示 Hello World! 的文本。

上面的 HelloMessage 被称为类组件，它通过继承 React.Component 类，使用render()方法返回需要渲染的内容。当然还有另外一种更简洁的写法，我们是用函数式组件：

const App = ()=>{
   
  return(
    <div>
      Hello world!
    </div>
  )
};
 
ReactDOM.render(
    <App