《一》React 基础

原创已于 2025-03-09 16:26:17 修改 · 567 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React

于 2020-12-28 11:23:11 首次发布

React 专栏收录该内容

18 篇文章

订阅专栏

本文基于 React18，介绍了 React 的特点，如声明式编程、组件化开发等。阐述了在现有网站添加 React 及用脚手架创建新项目的方法，还分析了 React 的渲染和更新机制，重点讲解了虚拟 Dom 和 Diff 算法，包括 tree diff、component diff 和 element diff 等内容。

基于 React18。

React 是 Facebook 开发的一个用于构建用户界面的 JavaScript 库。

React 的特点：

声明式编程：React 采用声明式编程，指的是我们只需要维护自己的状态 state，当状态改变时，React 会自动执行 render 函数，根据最新的状态去渲染 UI 界面。
命令式编程：命令机器如何去做事情（how），这样不管想要的是什么（what），它都会按照你的命令实现。
声明式编程：告诉机器想要的是什么（what），让机器想出如何去做（how）。
例如：想让一个数组里的数值翻倍。
```
// 命令式编程：需要先遍历整个数组，取出每个元素，乘以二，然后把翻倍后的值放入新数组，一步一步都要告诉程序
var numbers = [1,2,3,4,5]
var doubledNumbers = []
for(var i = 0; i < numbers.length; i++) {
	var newNumber = numbers[i] * 2
	doubledNumbers.push (newNumber)
}

// 声明式编程：只需要告诉程序想要数组里的数值翻倍
var numbers = [1,2,3,4,5]
var doubledNumbers = numbers.map(n => n * 2)
```
组件化开发：React 采用组件化开发，指的是将复杂的页面拆分成一个个小的组件，然后再将这些组件组合、嵌套在一起，最终形成应用程序。
一次学习，跨平台编写：例如在 React Native 中就可以使用 React 语法进行移动端开发。

使用 React：

在现有网站中添加 React：

在 HTML 中准备一个容器。
添加依赖。
- 引入 react 核心库：react 包中包含了 react web 和 react native 所共同拥有的核心代码。引入之后就会有一个全局对象 React。
- 引入 react-dom 扩展库： react-dom 包针对 web 和 native 所做的事情不同。在 web 端，react-dom 包最终会将 JSX 渲染成真实 DOM，显示在浏览器中；在 native 端，react-dom 包最终会将 JSX 渲染成原生的控件（例如： Android 中的 Button，IOS 中的 UIButton 等）。因此将 react-dom 包单独拆分了出来。引入之后就会有一个全局对象 ReactDOM。
- 引入 babel：用于将 JSX 转为 JS，以便在浏览器中运行。
编写 React 代码。

<body>
	<!-- 准备一个容器 -->
	<div id="root"></div>

	<!-- 添加依赖 -->
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	
	<!-- 编写 React 代码：React18 之前 -->
	<script type="text/babel" > //  type="text/babel" 是为了让 babel 知道它需要来解析这段 JSX
		ReactDOM.render(<h1>Hello,React</h1> , document.getElementById('root')) // 将要显示的内容渲染到根元素中。第一个参数是一个 HTML 元素或 React 组件，第二个参数是要渲染到的页面中的元素
	</script>

	<!-- 编写 React 代码：React18 之后 -->
	<script type="text/babel" > //  type="text/babel" 是为了让 babel 知道它需要来解析这段 JSX
		const root = ReactDOM.createRoot(document.getElementById('root')) // 创建一个根元素。参数是要渲染到的页面中的元素
		root.render(<h1>Hello,React</h1> ) // 将要显示的内容渲染到根元素中。参数是一个 HTML 元素或 React 组件
	</script>
</body>

请添加图片描述

基于 React 脚手架 `create-react-app` 创建一个新的 React 项目：

传统的脚手架：指的是在搭建建筑物时临时搭建出来的一个框架。

编程中的脚手架：是一种可以帮助开发者快速生成项目的工程化结构的工具。脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷。

全局安装 create-react-app 脚手架（简称 cra）：npm i create-react-app -g。

安装成功后，可以通过 create-react-app --version 可以查看 create-react-app 的版本。
切换到想要创建项目的目录，创建基于 React 脚手架的项目：create-react-app react-demo。

项目名称不能包含大写字母。
进入项目所在的目录： cd react-demo。
启动项目：npm start。

npm run start：会打开一个本地的服务器，并且将项目托管在这个服务器中，就可以在本地浏览网站。
npm run build ：在 build 文件夹内生成应用的优化版本，build 文件夹中的文件可以被用于部署到生产环境。
npm run eject： create-react-app 脚手架是基于 Webpack 开发的，但是在生成的项目目录中并没有看到 Webpack 相关的内容，这是因为 create-react-app 脚手架将 Webpack 相关的配置隐藏了。通过 npm run eject 可以将 Webpack 配置信息弹出。这个操作是不可逆的，要谨慎使用。

使用 `create-react-app` 架手架创建出来的项目目录结构：

请添加图片描述

node_modules：项目依赖的第三方包。
public：网站的静态资源文件和项目的 HTML 入口文件。

打包构建时，public 文件夹下的内容会被直接复制到打包输出的文件夹下。
src：网站的源代码，是基于 ES6 标准的 React 代码。

基于 ES6 标准的 React 代码是不能直接被浏览器执行的，因此 src 和 public 文件夹中所有的代码和资源都要转化成可以被浏览器识别的基于 ES5 标准的 JavaScript 代码，这些转化后的代码将会被打包统一放置在一个新生成的 build 文件夹中。
build：打包构建后输出的文件夹。存放的是可以被浏览器执行的 ES5 标准的 JavaScript 代码。
.gitignore：git 的忽略文件。
package.json：记录项目的基础信息、依赖包版本信息等。
package-lock.json：记录 node_modules 目录下所有包的名称、版本号、下载地址以及当前包又依赖了哪些包等。
README.md：项目的说明文档。

`React.StrictMode` 严格模式：

React.StrictMode 本质上也是一个组件，自身不会渲染成任何可见的 UI。它可以为其后代元素触发额外的检查和警告，仅在开发模式下运行，不会影响生产构建。

严格模式下会检查：

不安全的生命周期：UNSAFE_componentWillMount 等。
过时的 ref API：字符串形式的 ref。
废弃的 findDOMNode 方法：在之前的 React API 中，可以通过 findDOMNode 来获取 DOM，目前已经不推荐这种方式了。
过时的 Context API：早期的 Context 是通过 static 声明 Context 对象属性，然后通过 getChildContext 返回 Context 对象等方式来使用 Context。
意外的副作用：严格模式下，组件的生命周期都会被执行两次，这是 React 为了让开发者查看编写的一些逻辑代码被调用多次时，是否会产生一些副作用。

import {StrictMode} from 'react'
import Home from './home'
class App extends PureComponent {
  render() {
    return (
      <StrictMode>
        <Home />
      </StrictMode>
    )
  }
}


class Home extends PureComponent {
  // 已过时的生命周期，在严格模式下会报错提醒
  UNSAFE_componentWillMount() {
    console.log('UNSAFE_componentWillMount')
  }

  render() {
    return <h1>Home</h1>
  }
}

请添加图片描述