前端学习框架React(一)：初识react

最近好乐
1,034 阅读11分钟

React是什么

React 是一个用于构建用户界面的开源 JavaScript 库，特别适用于构建单页面应用。React 最初由 Facebook 的工程师 Jordan Walke 创建，并于 2013 年 5 月首次公开发布。虽然它最初是为了解决网页应用的问题，但后来发展出了 React Native，可以用于构建原生移动应用。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。 React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。 React 是用于动态构建用户界面的 JavaScript 库

React的主要原理

  • 传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。（想看更多就到PHP中文网React参考手册栏目中学习）

  • 为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

  • 最明显的一点好处就是React所谓的 dom diff ，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff 算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。

React的核心概念

  1. 组件（Component）： 组件是 React 的核心构建块。一个组件负责渲染屏幕上的一个小部分。组件可以接受输入（Props），并输出 React 元素描述它们应该显示什么。组件可以是类或者函数，现在更多地使用函数组件，特别是使用 hooks 后。
  2. 状态（State）： 状态是组件内部的数据，用于控制组件的行为和渲染。当状态发生变化时，组件会重新渲染。状态是组件的局部和私有的，通常用于跟踪交互或外部数据的变化。
  3. 属性（Props）： 属性是组件之间传递数据的方式。它们是只读的，不能在接收组件中修改。组件可以接收任意数量的 props，并使用它们来渲染不同的输出或控制组件的行为。
  4. JSX： JSX 是一种类似于 HTML 的语法扩展，它允许你在 JavaScript 中写类似 HTML 的标签。React 使用 JSX 来描述用户界面，然后转换成 JavaScript 函数调用。
  5. 虚拟 DOM（Virtual DOM）： React 使用虚拟 DOM 来减少对实际 DOM 的操作，从而提高性能。虚拟 DOM 是一个内存中的树形结构，它表示了真实的 DOM 树。React 计算虚拟 DOM 的变化，然后批量更新真实 DOM。
  6. 生命周期方法（Lifecycle Methods）： React 组件有多个生命周期阶段，如挂载、更新和卸载。生命周期方法允许组件在这些阶段执行特定的操作，如初始化、响应属性变化或清理资源。
  7. Hooks： Hooks 是 React 16.8 版本引入的新功能，它们允许你在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 如 useState, useEffect, useContext 等提供了更简洁和一致的 API 来管理组件的逻辑。
  8. Context API： Context API 提供了一种在组件树中传递数据的方式，而无需手动将 props 逐层传递下去。这对于全局状态管理和共享配置非常有用。
  9. 数据流（Data Flow）： 在 React 中，数据流通常是单向的，从父组件到子组件。这有助于保持应用状态的可预测性和易于调试。
  10. Fiber 架构： React 的新调度器（Scheduler）和 Fiber 架构允许 React 更有效地管理更新，实现异步渲染和优先级更新，以改善用户体验。
  11. 严格模式（Strict Mode）： Strict Mode 不是一个用来渲染可见 UI 的组件，而是一个帮助识别潜在问题的工具。它不会渲染任何可见的 UI，但它会在开发环境中触发额外的检查。

创建react项目

React开发环境准备

使用 React 编码，我们有两种方式：

  1. ❌（不推荐）使用 <script> 标签引入 .js 文件来使用 React。这是比较古老的编码方式——如果我们的项目比较大，我们会对项目的 JS 文件进行拆分，然后页面上就需要通过 <script> 标签加载很多拆分出来的 JS 文件。这样的话，页面性能会很低，可维护性也很差。
  2. ✔️（推荐）使用“脚手架”工具来编码。

什么是”脚手架工具“

“脚手架”实质上是前端开发过程中的一个辅助工具，它会自动帮我们构建一个大型项目的开发流程和目录。它允许我们以一定的方式去实现 JS 文件的相互引用，让我们更方便的对项目进行管理。

但是，我们在“脚手架”里边写的代码实际上并不能直接运行。我们需要“脚手架工具”帮我们做代码的“编译”，编译出来的代码才可以被浏览器识别、运行。我们一般会使用 GRUNT、Gulp、Webpack 等工具来帮助我们编写“脚手架”。

仅对 React 学习而言，我们不必太过关心“脚手架工具”的底层实现，只需要知道如何使用即可。

用 React.js 产生的“脚手架工具”非常多，甚至有的公司内部都有自己定制的“脚手架工具”。在初学 React.js 的时候，我们今天使用 React 官方提供的“脚手架工具”——Create-react-app。

由于是官方提供的“脚手架工具”，其“健壮性”无需怀疑。同时，它的使用很简单，可定制性很强，调试代码也非常方便。如果你没有非常深厚的 Webpack 配置功底，使你能够驾驭更复杂的“脚手架工具”的话，那么使用 Create-react-app 无疑是一个最佳的选择。

安装React项目脚手架

首先咱们来到react的中文官网下来查看官方文档，

image.png

react项目脚手架create-react-app是一个官方提供的工具，用于快速搭建react开发环境，咱们按照文档上的步骤来安装。

1.全局安装create-react-app

使用npm(node.js的包管理器)全局安装create-react-app,以便在任何地方创建react应用。

	npm install -g create-react-app

安装完成后，你可以通过create-react-app --version来检查其版本。 （注意命令是create-react-app而不是creat-react-app）

2.创建React项目

使用create-react-app命令后跟你的项目名称来创建一个新的React项目。 在这里我取名为 my-react

	create-react-app my-react

这个命令会从GitHub拉取一个标准的React项目模板，并设置好所有必要的依赖和配置。

安装完成后就可以看到这样一个项目了

image.png

运行项目

npm run start

运行后默认就会在浏览器的3000端口运行这个项目

image.png

  • 这里还有一种创建react项目的方法

使用npm init vite的方法

npm init vite

创建完成之后还需要再安装一下依赖

npm i

然后通过npm run dev命令运行

npm run dev

运行后你就可以在你浏览器的某个端口我这里是5173看见自己的项目了

image.png

在React中，npm init vite 和 create-react-app (npx create-react-app) 都是用来快速搭建React项目的方法。

create-react-app 是由 Facebook 开发的官方脚手架工具，用于创建React应用程序。它提供了一套预配置好的开发和构建环境，使得开发者可以立即开始编写代码而无需担心复杂的配置问题。

使用 npm init vite 或者 npm create vite 是使用Vite构建工具来初始化一个React项目。Vite 提供了一个更快的开发体验，因为它使用ES模块服务而不是打包整个应用程序。

  • create-react-app 更适合那些希望快速开始并且不想处理复杂配置细节的开发者。
  • npm init vite 或者 npm create vite 更适合那些对构建过程有更多控制需求的开发者，以及那些重视开发效率和项目现代化的项目。

这样咱们的第一个react项目就创建完成啦。

这里在给大家聊一下JSX

React JSX

什么是JSX

  • JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

  • 虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签那样的使用，而且更便于代码的阅读。

  • 使用JSX语法后，你必须要引入babel的JSX解析器，把JSX转化成JS语法，这个工作会由babel自动完成。同时引入babel后，你就可以使用新的es6语法，babel会帮你把es6语法转化成es5语法，兼容更多的浏览器。

1、全称: JavaScript XML 2、react 定义的一种类似于 XML 的JS扩展语法: JS + XML 本质是 React.createElement(component, props, ...children) 方法的语法糖 3、作用: 用来简化创建虚拟DOM 1.写法：var ele =

Hello JSX!

2.注意1：它不是字符串, 也不是 HTML/XML 标签 3.注意2：它最终产生的就是一个JS对象 标签名任意: HTML 标签或其它标签标签属性任意: HTML 标签属性或其它 4、基本语法规则 1、遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析 2、遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含 5、babel.js的作用 1、浏览器不能直接解析JSX代码, 需要 babel 转译为纯JS的代码才能运行 2、只要用了JSX，都要加上type="text/babel", 声明需要 babel 来处理

渲染虚拟DOM(元素)

1、语法: ReactDOM.render(virtualDOM, containerDOM) 2、作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示 3、参数说明 参数一: 纯js或jsx创建的虚拟dom对象 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX的使用

<!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>Document</title>
    <style>
        .title{
            background-color: aliceblue;
            width: 200px;
        }
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入 React 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>

    <!-- 引入babel：
            1. ES6 ==> ES5
            2. jsx ==> js
    -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">

        let myData = 'Student'
        let myId = 'ITStudent'
        // 1. 创建虚拟 DOM
        const VDOM = (
            <div>
                <h1 className="title" id={myId.toUpperCase()}>Hello，
                    <span style={{color:'white',fontSize:'20px'}}>{myData}</span>
                </h1>
                <input type="text" />
                <Good></Good>
            </div>
        )

        // 2. 渲染到页面中的指定 DOM
        // ReactDOM.render(虚拟DOM，真实DOM)
        ReactDOM.render(VDOM,document.getElementById('test'))

    </script>
</body>
</html>

JSX的语法规则

1、定义虚拟DOM时，不要写引号； 2、标签中混入JS表达式时，要用 {} 3、样式的类名指定不要用class，要用className； 4、内联样式，要用style={{key:value}}的形式去写 5、只能有一个根元素 6、所有标签都必须闭合 7、标签的首字母：

  1. 若小写字母开头，则将该标签转化为html同名的元素，渲染到页面； 若html没有同名的元素，则报错。
  2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错；

好啦，以上就是我今天要分享的主要内容了，希望能够对初学react的你有所帮助，能够点个免费的赞赞嘛，感谢感谢！

avatar
文章
阅读
粉丝