初识react.js

举报
小黑脸 发表于 2020/07/02 23:42:57 2020/07/02
【摘要】 之前看过介绍,说国内使用vue居多,国外使用react居多,因为vue是中国人写的,中文文档写的很好。那么这次我就想看看react和vue使用上的区别。之前的博客已经介绍过vue了,那么我们这里介绍一下react吧,以下简介当然是网上看的啦:React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。Re...

之前看过介绍,说国内使用vue居多,国外使用react居多,因为vue是中国人写的,中文文档写的很好。那么这次我就想看看react和vue使用上的区别。

之前的博客已经介绍过vue了,那么我们这里介绍一下react吧,以下简介当然是网上看的啦:

  1. React 是一个用于构建用户界面的 JAVASCRIPT 库。

  2. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

  3. React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

  4. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

image.png

引入react我们一般使用cdn就可以了,

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

React 的对象与元素挂钩,当然这里所说的元素指的是react元素,它用于在屏幕上输出内容,而不是dom元素,而React元素又和DOM内容保持一致。比较绕。它渲染的方法用的是reactDOM的render方法,其实还是很好理解的。下面是一个计时器例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="tick"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2> {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('tick')
  );
}
 
setInterval(tick, 1000);
</script>

</body>
</html>

运行效果:

image.png

通过简单的元素渲染的对比,我觉得Vue比react的代码量写少了很多,还是vue方便啊

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。