React框架简介

发布时间：2020-12-15 20:35:37 所属栏目：百科来源：网络整理

导读：React的基本认识 Facebook开源的一个js库，一个用来动态构建用户界面的js库官网：英文官网: https://reactjs.org/? ? ? ? ? ? ?中文官网: https://doc.react-china.org/ ? React的特点 Declarative(声明式编码)，Component-Based(组件化编码)，Learn Once,W

React的基本认识

Facebook开源的一个js库，一个用来动态构建用户界面的js库

官网：英文官网: https://reactjs.org/? ? ? ? ? ? ?中文官网: https://doc.react-china.org/

React的特点

Declarative(声明式编码)，Component-Based(组件化编码)，Learn Once,Write Anywhere(支持客户端与服务器渲染)，高效，单向数据流

React高效的原因

虚拟(virtual)DOM,不总是直接操作DOM(批量更新,减少更新的次数)

高效的DOM Diff算法,最小化页面重绘(减小页面更新的区域)

React的基本使用

需求：在一个div容器内插入一个元素，效果如下：

导入相关js库文件(react.js（核心库）,react-dom.js（提供操作DOM的react扩展库）,babel.min.js（解析JSX语法代码转为纯JS语法代码的库）)

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

?具体代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
  <div id="test"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
    // 1. 创建虚拟DOM元素对象
    var vDom = <h1>Hello React!</h1>   // 不是字符串
    // 2. 将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom,document.getElementById(‘test‘))
  </script>
</body>
</html>

安装React Devtools调试工具

下载? ? chrome? ? ? react developer tools

安装：打开chrome 浏览器==>更多工具==》扩展程序

将插件拖入在详细信息中点击启用即可；?react developer tools 安装完毕。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!