ReactJs入门01(学习笔记)

最新推荐文章于 2026-06-16 08:52:42 发布

原创最新推荐文章于 2026-06-16 08:52:42 发布 · 204 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习笔记

这篇博客介绍了React的基本概念和特点，包括其作为JavaScript库用于构建用户界面，高效的DOM模拟以及声明式设计。文章通过示例展示了如何使用ReactJSX创建元素并渲染到DOM中，强调了React元素的不可变性和ReactDOM的单向数据流。此外，还提供了定时器案例来说明React如何智能地更新部分DOM，提高性能。

(学习笔记仅帮助自己理解记忆，部分内容可能存在理解错误，如有发现，还望指出)

定义

1.React 是一个用于构建用户界面的 JAVASCRIPT 库。
2.React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
3.React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
4.React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

简单示例：

React 可以直接下载使用，也可以直接使用 Staticfile CDN 的 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>

或者官方提供的CDN地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

在这里插入图片描述实现结果：

在这里插入图片描述

React JSX简介

（ReactJs中较核心的一个语法）

React JSX概念入门及简单示例

元素渲染

定义：

元素是构成 React 应用的最小单位,描述了你在屏幕上想看到的内容。

特点：

1.与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。
2.React DOM 会负责更新 DOM 来与 React 元素保持一致。

简而言之：与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

div-'k’中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。

我们用 React 开发应用时一般只会定义一个根节点。
但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
在这里插入图片描述

更新元素渲染

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

定时器案例：

在这里插入图片描述效果：

React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
简而言之，当替换元素替换被替换元素时，只会选择替换元素中不同的内容在被替换元素上进行替换；

function Clock(props) {
    return (
       <div>
         <h1>Hello, world!</h1>
         <h2>现在是 {props.date.toLocaleTimeString()}</h2>
      </div>
    );
}

function tick() {
     ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('k')
     );
}

setInterval(tick, 1000);