react 的基础认识一

爱被打了一巴掌 2022-11-11 14:41 242阅读 0赞

#### 一、React 出现的历史背景及特性介绍 ####

1.  传统 `Web UI` 开发问题出现的根源，如下所示：

*  传统 `UI` 操作关注太多细节
 *  应用程序状态分散在各处，难以追踪 和维护

1.  传统 `DOM API` 关注太多细节，`React` 始终整体刷新页面，无需关心细节
2.  `React` 很简单，如下所示：

*  1个新概念
 *  4个必须 `API`
 *  单向数据流
 *  完整的错误提示

1.  `React` 解决了 `UI` 细节问题，数据模型使用 `Flux` 架构，单向数据流

#### 二、以组件方式考虑 UI 的构建 ####

1.  以组件方式考虑 `UI`，将 `UI` 组织成组件树的形式
2.  理解 `React` 组件，如下所示：

*  `porps + state = view`
 *  `React` 组件一般不提供方法，而是某种状态机
 *  `React` 组件可以理解为一个纯函数
 *  单向数据绑定

1.  创建一个简单的组件，`TabSelect`，如下所示：

*  创建静态 `UI`
 *  考虑组件的状态形成
 *  考虑组件的交互方式

1.  受控组件和非受控组件，如下所示：

*  受控组件，表单元素状态由使用者维护
 *  非受控组件，表单元素状态 `DOM` 自身维护

1.  何时创建组件，单一职责原则，如下所示：

*  每个组件只做一件事
 *  如果组件变得复杂，那么应该拆分成小组件

1.  数据状态管理，`DRY` 原则，如下所示：

*  能计算得到的状态就不要单独存储
 *  组件尽量无状态，所需数据通过 `props` 获取

#### 三、JSX 的本质，不是模版引擎，而是语法糖 ####

1.  理解 `JSX`，不是模版语言，而是一种语法糖
2.  `JSX`，在 `Javascript` 代码中直接写 `HTML` 标记
3.  `JSX` 的本质，动态创建组件的语法糖
4.  在 `JSX` 中使用表达式，如下所示：

*  `JSX` 本身也是表达式
 *  在属性中使用表达式
 *  延展属性
 *  表达式作为子元素

1.  `JSX` 优点，如下所示：

*  声明式创建界面的直观
 *  代码动态创建界面的灵活
 *  无需学习新的模版语言

1.  约定，自定义组件以大写字母开头，如下所示：

*  `React` 认为小写的 `tag` 是原生 `DOM` 节点，如 `div`
 *  大写字母开头为自定义组件
 *  `JSX` 标记可以直接使用属性语法，例如 `<menu.Item />`

#### 四、React 组件的生命周期及其使用场景 ####

1.  `react` 的生命周期，如下所示：

*  `Render` 阶段，纯净且没有副作用，可能会被 `react` 暂停，中止或重新启动
 *  `Pre-commit` 阶段，可以读取 `DOM`
 *  `Commit` 阶段，可以使用 `DOM`，运行副作用，安排更新

1.  `constructor`，如下所示：

*  用于初始化内部状态，很少使用
 *  唯一可以直接修改 `state` 的地方

1.  `getDerivedStateFromProps`，如下所示：

*  当 `state` 需要从 `props` 初始化使用
 *  尽量不要使用，维护两者状态一致性会增加复杂度
 *  每次 `render` 都会调用
 *  典型场景，表单控件获取默认值

1.  `componentDidMount`，如下所示：

*  `UI` 渲染完成后调用
 *  只执行一次
 *  典型场景，获取外部资源

1.  `componentWillUnmount`，如下所示：

*  组件移除时被调用
 *  典型场景，资源释放

1.  `getSnapshotBeforeUpdate`，如下所示：

*  在页面 `render` 之前调用，`state` 已更新
 *  典型场景，获取 `render` 之前的 `DOM` 状态

1.  `componentDidUpdate`，如下所示：

*  每次 `UI` 更新时被调用
 *  典型场景，页面需要根据 `props` 变化重新获取数据

1.  `shouldComponentUpdate`，如下所示：

*  决定 `Virtual DOM` 是否要重绘
 *  一般可以由 `PureComponent` 自动实现
 *  典型场景，性能优化

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaFx基础学习【一】：基本认识

目录一、介绍二、JavaFx应用基本结构三、快速创建JavaFx项目体验四、创建Maven项目体验五、其他章节 -------------------

拼搏现实的明天。/ 2023年10月14日 17:53/ 0 赞/ 59 阅读

相关入门教程: 认识 React

课前准备我们将会在这个教程中开发一个小游戏。你可能并不打算做游戏开发，然后就直接跳过了这个教程——但是不妨尝试一下！你将在该教程中学到关于构建 React 应用的基础知

╰+哭是因爲堅強的太久メ/ 2023年06月07日 08:18/ 0 赞/ 8 阅读

相关 React基础知识(一)

一、搭建React工作环境 1. React的核心库：`react.development.js`。 2. React进行Dom操作的库：`react-dom.dev

╰+攻爆jí腚メ/ 2022年12月31日 06:20/ 0 赞/ 68 阅读

相关 react 的基础认识一

一、React 出现的历史背景及特性介绍 1. 传统 `Web UI` 开发问题出现的根源，如下所示：传统 `UI` 操作关注太多细节应用程序状态分散

爱被打了一巴掌/ 2022年11月11日 14:41/ 0 赞/ 243 阅读

相关 react 的基础认识二

一、理解 Virtual DOM 及 key 属性的作用 1. `JSX` 的运行基础，`Virtual DOM` 2. 虚拟 `DOM` 的工作，如下所示：

た入场券/ 2022年11月11日 14:41/ 0 赞/ 228 阅读

相关认识React，了解React

一、React简介 1、React是一个用于构建用户界面的JavaScript库。 2、React起源于Facebook的内部项目，用来建设Instagram的网站

偏执的太偏执、/ 2022年09月11日 11:17/ 0 赞/ 214 阅读

相关认识React.js

目录[(?)][Link 1][\[+\]][Link 1] > React并不是一个框架，React提供了一些新颖的概念、库和编程原则让你能够同时在服务端和客户

﹏ヽ暗。殇╰゛Y/ 2022年08月21日 11:40/ 0 赞/ 208 阅读

相关 React 基础（一）

一、简介 React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期

浅浅的花香味﹌/ 2022年05月26日 12:40/ 0 赞/ 204 阅读

相关（一）认识React

一，React是什么？它是一个库，一个javascript库， 1，React的用处？用于构建用户界面，通常被理解为MVC中的V； 2，Rea

╰半橙微兮°/ 2022年05月19日 00:35/ 0 赞/ 199 阅读

相关 React基础知识（一）

一、React介绍是一个开源（为数据渲染视图）的js库 virtualDOM、单向数据流来解决视图更新频繁的问题。使用场景：数据大量变化视图更新频繁，（

àì夳堔傛蜴生んèń/ 2021年10月29日 21:26/ 0 赞/ 432 阅读