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