引入

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 的组件库。

为什么使用 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

我们可以使用 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>
    );
}

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（用于路由管理）等。

基于next.js的内容管理系统微信小程序