react学习笔记 item1 --- 基础入门

时间:2022-05-27 00:31:53

React 是一个用于构建用户界面的 JAVASCRIPT 库,由于主要用于构建UI,React 被认为是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,在众多的JavaScript库之中,Facebook为什么还需要提出react这个JavaScript库呢?原因就是Facebook在构建一些数据不断变化的大型应用的时候,由于数据的不断变化,导致需要进行大量的DOM操作以及其中及其复杂的逻辑,往往在修改一处代码的时候,就会引起其他一些意想不到的变化。因此公司就提出了react这个JavaScript库。

react学习笔记 item1 --- 基础入门

那么react是如何解决上述项目中出现的问题呢?

  • 针对大量的DOM操作这个问题,用户只需要通过逻辑控制需要展示哪些DOM内容,具体的展示过程由react自动完成。
  • 针对复杂的逻辑结构,react中一种状态对应一种内容,这样我们在改变状态时就知道对应的内容,逻辑清晰。

react的优点

  • 速度很快

    react引入了一个叫做虚拟DOM的概念,安插在JavaScript逻辑和实际的DOM之间。它并不直接对DOM进行操作,而是通过在虚拟DOM中的微操作来实对现实际DOM的局部更新,最大限度地减少与DOM的交互

  • 组件化
    React中最核心的就是组件,组件将数据和逻辑进行封装,提高了代码的复用性,降低了测试难度和代码的复杂度。

  • 单向响应的数据流

    React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

  • 纯JavaScript
    在react中,html 和 css 都看作是JavaScript。由于在react中,主要通过对用户的交互来更新状态,因此将js逻辑和视图层绑定在一起,能获得更快的响应。

第一个程序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个react程序</title>
<script type="text/javascript" src="lib/react.js"></script>
<script type="text/javascript" src="lib/react-dom.js"></script>
<script type="text/javascript" src="lib/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>This is my first react demo....</h1>,
document.getElementById("example"));
</script>
</body>
</html>

运行结果为:

This is my first react demo....

这种写法与我们之前写的html+JavaScript极其相似,实例中我们引入了三个库: react. js 、react-dom.js 和 browser.min.js:

  • react.js - React 的核心库
  • react-dom.js - 提供与 DOM 相关的功能
  • browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

:在之前的一些教程中,可能会发现browser.min.js 文件的位置被JSXTransformer.js以及<script type="text/jsx">,这是因为:在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js ;在react 0.14后,这个依赖的库改为browser.js,页面script标签的type也由text/jsx改为text/babel。

但是以上只能用来测试学习react,在实际项目中,我们会用到一些类似webpack打包工具,关于webpack的使用后续也会介绍到。