引入

Node.js

为什么前端需要 Node.js？

前端、Node.js 和 NPM（Node Package Manager）之间有着密切的关系，它们分别是 Web 开发中不同层面的组成部分。

前端： 前端是指用户在浏览器中看到并与之交互的界面部分，包括 HTML（超文本标记语言）、CSS（层叠样式表）和 JavaScript。前端开发专注于设计和构建用户界面，使其在各种浏览器和设备上具有一致的外观和行为。
Node.js： Node.js 是一个基于 Chrome V8 JavaScript 引擎的运行时环境，可以用于在服务器端运行 JavaScript。与传统的浏览器端 JavaScript 不同，Node.js 允许开发者使用 JavaScript 来构建服务器端应用程序，处理文件操作、网络通信、数据库访问等任务。Node.js 提供了一种非阻塞的事件驱动模型，使得能够高效地处理大量并发请求。
NPM（Node Package Manager）： NPM 是 Node.js 生态系统中的包管理工具。它允许开发者在自己的项目中引入、管理和共享代码库（称为包或模块）。通过 NPM，开发者可以轻松地安装、更新和删除依赖项，以及分享自己编写的代码供其他开发者使用。NPM 还允许将项目所需的依赖项记录在一个 package.json 文件中，以便其他开发者能够重建项目的开发环境。

得益于 NPM 的出现，开发者可以轻松地在自己的项目中引入、管理和共享代码库，这使得前端开发变得更加高效。例如，有许多优秀的开源 JavaScript 库可以帮助开发者快速构建用户界面，如 React、Vue 和 Angular 等。通过 NPM，开发者可以轻松地将这些库引入到自己的项目中，从而避免重复造轮子。

如今 NPM 有着庞大的开发者社区，拥有超过 100 万个包，每周下载量超过 100 亿次。NPM 也是目前最大的软件注册表，每天有数千名开发者在其中发布新的包。有以下知名的 NPM 包：

React (opens in a new tab)：用于构建用户界面的 JavaScript 库。
Vue (opens in a new tab)：用于构建用户界面的 JavaScript 框架。
Element (opens in a new tab)：基于 Vue 的组件库。
Ant Design (opens in a new tab)：基于 React 的组件库。

Why React ?

本章节举例用到的代码，先看看就行，与原生比较。

优势

React不同于传统的 html+css+js 的web页面开发模式，它更强调组件化，使用组件的方式聚焦于视图层，借助 jsx 来写高内聚 UI 组件，单向数据流模式使得 UI 组件状态的维护管理更加清晰。

用 react 开发，组件化抽离页面元素，页面实现是相当于是拼装模式，对于页面相似度大的业务，会显得特高效、快捷。

简而言之，更方便。

React 的核心概念是组件化。

React VS 原生

如果要根据数据渲染一张图片，使用原生 JS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
  </head>
  <body>
    <div id="testDl">
 
    </div>
    <button id="testBtn" onclick="test()">点击切换图片</button>
  </body>
  <script>
    // 读取数据
    var data = {
      title: "test",
      img: "https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/jetzihanheadpic.png",
    };
    // 获取 dom
    var dlEle = document.getElementById("testDl");
    // 刷新节点
    dlEle.innerHTML =
      "<dl>" +
      ' <dt><img src="' +
      data.img +
      '" /></dt>' +
      " <dd>" +
      data.title +
      "</dd>" +
      "</div>";
    dlEle.style.display = "height:10px;width:10px";
    test = function () {
      data.img =
        "https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/20221114090141.png";
      dlEle.innerHTML =
        "<dl>" +
        ' <dt><img src="' +
        data.img +
        '" /></dt>' +
        " <dd>" +
        data.title +
        "</dd>" +
        "</div>";
    };
  </script>
</html>

使用 React：

import { useState } from "react";
export default function Demo() {
  const [imgUrl, setImgUrl] = useState(
    "https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/jetzihanheadpic.png"
  );
  function changeImg() {
    setImgUrl(
      "https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/20221114090141.png"
    );
  }
  return (
    <div>
    <img className="w-96 h-96" src={imgUrl} alt="test" />
    <button onClick={changeImg}>点击切换图片</button>
    </div>
  );
}

从上述两个例子中，可以看出 React 的一些优势：

组件化： 在 React 中，界面被分解为多个独立的组件，每个组件负责特定的功能。这使得代码更加模块化、可复用和可维护。在原生 JavaScript 的例子中，整个界面逻辑都写在一个 <script> 标签中，不够清晰和结构化。
声明式编程： React 的 JSX 语法使得界面描述更接近于实际的界面结构，让代码更加清晰和易读。相比之下，原生 JavaScript 的例子中，界面逻辑被混合在一堆字符串中，难以理解。
状态管理： React 的状态管理机制（使用 useState）使得状态变化和界面更新更加方便。在原生 JavaScript 的例子中，状态变化需要手动操作 DOM，而在 React 中，状态变化会自动触发界面的更新。
易于维护和扩展： React 的组件化和模块化的特性使得代码更易于维护和扩展。当需要更改或添加功能时，只需修改或新增相应的组件，不会影响其他部分。而在原生 JavaScript 的例子中，随着功能增加，代码会变得越来越混乱和难以维护。

React 带来的组件化

组件化是 React 一个更大的特点。当我们开发大型网站时，有很多组件是重复的，因此，将重复的代码抽象成组件就可以很好的提高开发效率。

我们有这样的一个需求，服务端会返回 10 名同学的信息，我们要将它渲染到页面上，你是不是会去写十次代码呢？甚至如果 100 次 100000次呢？

我们一定会想到循环，循环是一种很好的解决方案，但是循环的时候，我们需要将数据和 HTML 混合在一起，这样的代码可读性很差，而且不利于维护：

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <title></title>
  </head>
  <body>
      <div id="main">
          <div id="" class="id-w">
              <div id="">昵称</div>
              <div id="">时间</div>
          </div>
      </div>
      <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
      <script type="text/javascript">
          var list = [{
                  name: "小张",
                  time: "12:22"
              },
              {
                  name: "小刘",
                  time: "12:22"
              },
              {
                  name: "小李",
                  time: "12:22"
              },
              {
                  name: "小孙",
                  time: "12:22"
              },
              {
                  name: "小周",
                  time: "12:22"
              },
          ]
          var cent = document.getElementById("main");
 
          console.log(cent);
          var str = ''
          for(var i = 0; i < list.length; i++) {
              str += "<div id='' class='id-w'>" +
                  "<div id=''> " + list[i].name + "</div>" +
                  "<div id=''>" + list[i].time + "</div></div>";
          }
          cent.innerHTML = str
      </script>
  </body>
 
</html>// eslint-disable-next-line no-tabs

在 Sandpack 中运行效果如下：

<!DOCTYPE html>
<html lang="en">
  <body>
      <div id="main">
          <div id="" class="id-w">
              <div id="">昵称</div>
              <div id="">时间</div>
          </div>
      </div>
      <script type="text/javascript">
          var list = [{
                  name: "小张",
                  time: "12:22"
              },
              {
                  name: "小刘",
                  time: "12:22"
              },
              {
                  name: "小李",
                  time: "12:22"
              },
              {
                  name: "小孙",
                  time: "12:22"
              },
              {
                  name: "小周",
                  time: "12:22"
              },
          ]
          var cent = document.getElementById("main");

                  console.log(cent);
                  var str = ''
                  for(var i = 0; i < list.length; i++) {
                      str += "<div id='' class='id-w'>" +
                          "<div id=''> " + list[i].name + "</div>" +
                          "<div id=''>" + list[i].time + "</div></div>";
                  }
                  cent.innerHTML = str
              </script>
          </body>
        </html>

Open Sandbox

我们可以使用 React 来解决这个问题，React 的组件化思想，可以将重复的代码抽象成组件，这样就可以很好的提高开发效率。

// 模拟的假数据
const StudentsData = [
  {
    name: "John",
    id: "1",
  },
  {
    name: "Jane",
    id: "2",
  },
  {
    name: "Jack",
    id: "3",
  },
  {
    name: "Jill",
    id: "4",
  },
  {
    name: "Jenny",
    id: "5",
  },
];
 
function StudentCard(props) {
  return (
    <div className="flex flex-col gap-2">
      <h1 className="text-xl font-bold">ID：{props.id}</h1>
      <h1 className="text-xl font-bold">Name：{props.name}</h1>
    </div>
  );
}
 
export default function Students() {
  return (
    <div>
      <h1>Students</h1>
      {StudentsData.map((student) => {
        return (
          <StudentCard name={student.name} id={student.id} key={student.id} />
        );
      })}
    </div>
  );
}

在 Sandpack 中运行效果如下：

  // 模拟的假数据
const StudentsData = [
  {
    name: "John",
    id: "1",
  },
  {
    name: "Jane",
    id: "2",
  },
  {
    name: "Jack",
    id: "3",
  },
  {
    name: "Jill",
    id: "4",
  },
  {
    name: "Jenny",
    id: "5",
  },
];

function StudentCard(props) {
  return (
    <div className="flex flex-col gap-2">
      <h1 className="text-xl font-bold">ID：{props.id}</h1>
      <h1 className="text-xl font-bold">Name：{props.name}</h1>
    </div>
  );
}

export default function Students() {
  return (
    <div>
      <h1>Students</h1>
      {StudentsData.map((student) => {
        return (
          <StudentCard name={student.name} id={student.id} key={student.id} />
        );
      })}
    </div>
  );
}

Open Sandbox

React 历史

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它的历史可以追溯到2011年，以下是 React 的主要历史里程碑：

2011 年： React 的前身是一个名为 XHP 的项目，由 Facebook 的工程师 Jordan Walke 开发。XHP 是一种将 PHP 与 HTML 结合的技术，旨在提高性能和安全性。在此基础上，Jordan Walke 开始探索如何将这种思想应用到 JavaScript 中。
2013 年： React 正式发布。最初，React 的主要目标是解决构建复杂且高性能的用户界面所面临的问题。它引入了一种称为 "Virtual DOM" 的概念，通过将真实 DOM 的更改操作优化为虚拟 DOM 中的操作，以提高性能和渲染效率。
2015 年： React Native 发布。React Native 是基于 React 的框架，用于构建移动应用程序。它允许开发者使用类似于 React 的思维方式来创建原生移动应用，从而在不同平台上共享大部分代码。例如，开发者可以使用 React Native 来构建 iOS 和 Android 应用，而无需学习 Objective-C 或 Swift（用于 iOS）和 Java（用于 Android）。
2016 年： Facebook 开源 React 的许可证从 BSD+Patents 更改为 MIT 许可证。这一变化消除了一些社区成员对于 BSD+Patents 许可证中潜在法律问题的担忧，进一步促进了 React 社区的增长。
2018 年： React Hooks 发布。Hooks 是一种使函数组件能够拥有状态和生命周期等特性的方式，它改变了 React 组件的编写方式，使得组件更加简洁和可维护。
至今： React 在社区中持续发展壮大，成为了构建前端用户界面的首选工具之一。它广泛应用于各种项目，从小型应用到大型企业级应用，还有许多相关的库和工具，如 Redux（用于状态管理）和 React Router（用于路由管理）等。

React 的历史充满了技术创新和演进，它不仅改变了前端开发的方式，还为构建高性能、可维护和可扩展的用户界面提供了强大的工具和思想。

本章总结

在本章中，我们简要介绍了 React 的历史，以及它的主要特性和优势。我们还通过一个简单的示例，展示了 React 的组件化思想，在下一章中，我们将了解 React 的基本用法，以及如何使用 React 来构建用户界面。

面向对象高级属性语法基础