likes
comments
collection
share

哈士奇的react入门（一）：环境搭建、历史和优点

作者站长头像
站长
· 阅读数 52

哈士奇在前面分享vue的使用的时候发现自己的一些描述和布局很容易让一些初学的宝子疑惑，所以哈士奇一边修改，一遍学习，希望这个react的系列能够让大家能更好理解一些。

一、开发环境的搭建

开发工具

如果我们要用react进行项目开发的话，需要先配置好环境，哈士奇默认用的是vscode进行react开发，因此想要通过这篇文章进行react开发的同学需要提前准备好开发环境。（哈士奇用的mac哈）

创建项目

通常来说我们需要先准备好react的工具，通过工具去进行react项目的创建

1.下载react安装工具

npm install -g create-react-app

2.创建一个react项目

npx create-react-app my-react-app(代表你的项目名字)

3.下载相关依赖包

cd (你的文件夹)

npm i(mac大部分出现问题都是没给权限，可以 sudo npm i）

4.成功

哈士奇的react入门（一）：环境搭建、历史和优点

好了，通过上面的东西，我们成功创建了一个react项目，下面让我们正式了解react吧

二、初识react

React是什么？

react是一个帮助我们进行前端开发的工具库，主要是帮助UI界面构建用的，通常我们说到的react框架其实是指的react+react dom，官方通常是将它们拆开来的，大家打开package.json可以看到。

哈士奇的react入门（一）：环境搭建、历史和优点

React 和 ReactDOM

  1. React：

    • React 是一个用于构建用户界面的 JavaScript 库，它提供了一种声明式的编程模式来构建交互式的用户界面。开发者可以使用 React 来创建组件化的 UI，管理组件的状态，以及处理用户交互等。
    • React 主要包含了用于定义组件、管理组件状态、处理生命周期等功能。它是一个与平台无关的库，可以用于构建 Web 应用、移动应用（React Native）、静态网站（React Static）等。

  2. ReactDOM：

    • ReactDOM 是 React 库的一部分，它提供了与浏览器 DOM 相关的功能，例如将 React 组件渲染到真实的 DOM 元素中，以及处理事件等。
    • ReactDOM 主要包含了用于将 React 组件渲染到 DOM 中的方法，例如 ReactDOM.render() 方法用于将组件渲染到指定的 DOM 元素中，以及其他一些与 DOM 相关的操作方法。

在使用 React 构建 Web 应用时，通常会同时使用 React 和 ReactDOM。

聊聊历史

当年前端的一些历史大家应该也有所耳闻Html->jquery->Angular1->Angular+Vue+React 最开始的前端主要是静态页面，当时都是由后端程序员全程写完前端部分，并没有很细致的前后端方面的分工，到了jquery的时代一个$走天下，jquery带来了一种全新的前端页面的编写方式，前端从静态页面变为了动态页面，开始出现了动画等等一些能够给用户带来一些特别交互的功能。

Angular1开始把MVC的设计模式带入前端，让前端代码变得更加清晰和结构化，代码更加容易维护；通过指令封装复杂的 UI 组件、操作 DOM、处理事件等，使得代码更加模块化和可复用，拓展了html的功能和行为；模块化的架构让前端界面也开始变得可拓展和易于管理。 假设我们要实现一个简单的点击按钮显示消息的功能：

使用 jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="showMessageBtn">显示消息</button>
<div id="messageDiv"></div>

<script>
$(document).ready(function() {
  $('#showMessageBtn').click(function() {
    $('#messageDiv').text('Hello, jQuery!');
  });
});
</script>

</body>
</html>

使用 AngularJS：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AngularJS Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="MyController">
  <button ng-click="showMessage()">显示消息</button>
  <div>{{ message }}</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
  $scope.message = '';
  $scope.showMessage = function() {
    $scope.message = 'Hello, AngularJS!';
  };
});
</script>

</body>
</html>

这两个示例都实现了一个点击按钮显示消息的功能。在 jQuery 示例中，我们使用 jQuery 选择器来选取按钮和消息显示区域，并且绑定了按钮的点击事件来修改消息显示区域的内容。而在 AngularJS 示例中，我们使用 AngularJS 的指令（ng-click）来绑定按钮的点击事件，并在控制器中定义了一个函数来修改消息的值，通过数据绑定将消息显示在页面上。

更加简洁的开发方式让前端开发变得更规范更加易懂，但是由于Angular的新版本抛弃了原来Angular的老的开发者，这为React和Vue的市场提供了更多的机会（这是其中一个原因）

Vue的历史暂且不谈，我们来聊聊我们今天的主角，react。它是facebook写出来的一个前端开发框架，接近原生的js写法让js的程序员更加容易上手这个前端框架。

React的优点

组件化的开发

哈士奇的react入门（一）：环境搭建、历史和优点

我们在开发一个react项目的时候可以将项目里面不同的功能拆分开来，最后像搭积木一样将它放在一起

虚拟dom

这个涉及到react用到的diff算法，原本我们在进行前端开发的时候，jquery的时代，每一次的修改都需要重新对dom树进行修改和操作，那么我们进行一些修改的时候，大量重排会发生页面的闪烁和卡顿，在七八年前大家用电脑的时候一定会有这样的感觉。不仅仅是网络的原因，有时候可能是因为页面产生大量的重排影响了大家的用户体验。

react的优点在于它引入了虚拟dom，在实际修改之前，先对虚拟dom树进行修改，通过diff算法算出不同的修改，在虚拟dom中进行改变，然后再渲染到真实dom树上面，这样就能大量节省不必要的操作，提高渲染的能力。

声明式编程

以前jquery的时代使用的是命令式编程的编程方式，而react引入了声明式编程的编程方式，原本程序员需要做一个造轮子和组装成车子的人，但是声明式编程的出现，程序员不再需要考虑自己究竟需要怎么造轮子了。

举个例子：当程序员需要喝水时应该怎么办呢？使用命令式编程时，程序员需要告诉框架：我要找到干净的水，把干净的水放在杯子里面，喝水。但是使用声明式编程时，程序员只要告诉框架：我要喝水，框架就自动帮程序员解决其他问题了。

实际编程中，我们只关心渲染的结果，具体如何渲染，react框架会帮助我们解决。

总结

这篇文章哈士奇主要为大家介绍了一下react的环境搭建，发展历史还有一些react对比从前框架的一些优点，希望能对没有了解的包子宝子们有些帮助，后面还会更新具体实操的。

转载自:https://juejin.cn/post/7363470675799097378
评论
请登录