React入门简介

Vue与React是前端编程中常用的两个JS框架，两者的一些简单如下所示。

Vue建立在一个基于组件的架构上，以组件为中心，可以更轻松地创建动态用户界面。它还有一个强大的双向数据绑定系统，可以让我们轻松地保持数据和用户界面同步；Vue轻量、灵活且强大，最重要的是对于初学者来说相对简单。

Vue中文官网包含了详细的说明与教程：https://cn.vuejs.org/

React为开发人员提供了一种声明式编程风格，更易于阅读和调试。它还使用虚拟 DOM，速度比传统 DOM 更快，性能更好。React 基于组件的方法使开发人员能够利用可快速、轻松地组合在一起的可重用组件创建强大的应用程序。这使它成为快速原型开发和应用程序的绝佳选择。

React中文官网也提供了详细的教程：https://react.docschina.org/

关于如何选择vue还是react，以及两者详细的优缺点等信息可以参考文章：vue还是react，2024年开发者如何选择 | Fromidea。

今天仅仅是对React核心内容的总体情况的了解与简单的学习，思维导图插图来自于：https://github.com/jCodeLife/mind-map。

图床又失效了，感兴趣的可以关注我的公众号

React安装

关于React的安装与使用，有需要的朋友可以通过B站视频等进行学习，目前我仅想对React有一个总体了解，并不进行具体的练习。

React核心内容

React核心内容包括很多方面，有React脚手架、React函数式组件、JSX语法、元素渲染、条件渲染、生命周期、列表和Key、React哲学等部分，这个过程中还涉及标签闭合等小的注意事项，这些内容在React中文文档官网中有详细介绍。

（1）React脚手架

这里的脚手架（Scaffold），其实是一种工具，帮我们可以快速生成项目的工程化结构；每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的，而脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷。

使用代码：NPX create react APP。Create react APP 是react脚手架的名称，当然React也有其他的非官方脚手架。通过NPX的方式，可以直接去用这个脚架来进行项目的搭建，而不需要全局做一些安装；脚手架工具会帮助我们进行项目的搭建以及项目依赖的安装。

（2）JSX语法

在react语法中，它直接将javascript语法跟HTML语法写在了一起，这种语法叫做JSX。这种写法其实就相当于是一种模板语法，相比VUE的模板语法来说，JSX将HTML和javascript结合的更加的深入。书写JSX语法，有几个注意事项：在换行的时候必须使用小括号；只能返回一个根元素，使用HTML标签时必须争取的闭合。

（3）元素渲染

React 元素是构建 React 应用的最小单元，它描述了你希望在屏幕上看到的内容，是不可变对象，一旦创建就不能更改。React将元素渲染为DOM，仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果将 React 集成进一个已有应用，那么可以在应用中包含任意多的独立根 DOM 节点。

（4）React函数式组件

react组件有两种方式。一种是函数式组件，另外一种叫类组件。在现在官方主推的是函数式组件。因为相比函数式组件来说，类组件的书写要十分的复杂和冗余，而且还包含了很多更加复杂的生命周期等。

函数式组件的第一个参数是props，它是不可改变的，函数不能更改输入参数(接收父级传来的信息)；组件中return必须写(定义该组件要渲染的内容)。

（5）State和生命周期

State是React组件内部的数据源，用于描述组件的状态，它是组件数据的私有部分，可以用来管理动态数据。。当组件的状态发生变化时，React会自动重新渲染组件，并将新的状态传递给组件的render方法，从而更新组件的UI。命周期指的是组件从被创建出来，到被使用，最后被销毁的整个过程。在这个过程中，React提供了会自动执行的不同的钩子函数，我们称之为生命周期函数。React的生命周期可以分为三个阶段：挂载、更新、卸载。

（6）事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同：React 事件绑定属性的命名采用驼峰式写法，而不是纯小写；
如果采用 JSX 的语法，需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。

（7）条件渲染

在 React 中，可以创建不同的组件来封装各种需要的行为。还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新UI。

（8）列表与key

可以使用 JavaScript 的 map() 方法来创建列表，但是需要重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思是需要包含 key。Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化，因此应当给数组中的每一个元素赋予一个确定的标识。

（9）表单

HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。在 HTML 当中， <input> <textarea>和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

（10）状态提升

使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，最好将这部分共享的状态提升至他们最近的父组件当中进行管理。这是因为父组件基于属性把自己的一个fn函数传递给子组件，子组件在某些操作下把fn执行，在执行fn的过程中把父组件中的一些属性信息进行了修改，从而影响相关子组件的重新渲染。

（11）组合/继承

推荐使用组合而非继承来实现组件间的代码重用。

（12）React哲学

外链图片转存中…(img-8QigBcVP-1729308498676)]

（12）React哲学

[外链图片转存中…(img-cJsUk5YN-1729308498676)]