React学习之路(第1篇)

最新推荐文章于 2024-11-12 08:33:26 发布

HH白熊

最新推荐文章于 2024-11-12 08:33:26 发布

阅读量137

点赞数

分类专栏： React 前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/DHGhh/article/details/128163310

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

React

1 篇文章 0 订阅

订阅专栏

React是一个将数据渲染为HDML视图的开源JavaScript库, Facebook开发。https://react.docschina.org/

React的角色

React用于构建用户界面的JavaScript，React负责第三个步骤

1、发送请求获取数据
2、处理数据
3、操作DOM呈现界面

为什么用React

原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
使用JavaScipt直接操作DOM，浏览器会进行大量的重绘崇拜
原生JavaScript没有组件化编码方案，代码复用率低

React特点：

采用组件化模式、声明式编码，提高开发效率及组件复用率
在React Native中可以使用React语法进行移动端开发
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

简单实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- React操作DOM的库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 这里一定要写babel -->
    <script type="text/babel">
        const VDOM =  <h1>Hello React...</h1>
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>
</html>