初识react.js
【摘要】 之前看过介绍,说国内使用vue居多,国外使用react居多,因为vue是中国人写的,中文文档写的很好。那么这次我就想看看react和vue使用上的区别。之前的博客已经介绍过vue了,那么我们这里介绍一下react吧,以下简介当然是网上看的啦:React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。Re...
之前看过介绍,说国内使用vue居多,国外使用react居多,因为vue是中国人写的,中文文档写的很好。那么这次我就想看看react和vue使用上的区别。
之前的博客已经介绍过vue了,那么我们这里介绍一下react吧,以下简介当然是网上看的啦:
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
引入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>
运行效果:
通过简单的元素渲染的对比,我觉得Vue比react的代码量写少了很多,还是vue方便啊
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)