通俗讲React技术栈（整合篇）

最新推荐文章于 2025-06-19 12:39:49 发布

前端薛之谦...

最新推荐文章于 2025-06-19 12:39:49 发布

阅读量4.5k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_41105030/article/details/88948184

本文详细介绍了React，包括其作为JavaScript库的定位、为何学习React及其声明式、组件化、跨平台等特性。深入探讨了React的声明式编程、虚拟DOM、Diff算法和单向数据流的概念。同时，讲解了React组件的state、props和refs，以及React脚手架、路由和常见请求库。此外，还提到了React与Redux的状态管理和UI库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React是用于构建页面的JavaScript 库(只关注于View)

构建用户界面，其实就是把数据展示出来。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

为什么要学习React

当然是为了统一宇宙…这是不可能的.由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。也就是说React是最流行的一门框架。
在社区方面，React由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客在社区中都是可以很方便就能找到的。而且是由强大Facebook进行维护的，安全可靠。

React的特点

声明式

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。

以前都是自己亲自操作dom，有了声明式，就是我们不用亲自做，只需去操作数据.

组件化

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。

什么是模块化?就是以代码的角度去分析问题；把我们的编程时候的业务逻辑；分割到不同的模块来进行开发，可以使代码重用，变量不会污染。
组件化:就是从UI的角度去分析；把一个页面；把一个页面去拆成互不相干的小组件。如果要实现一个页面，将需要的组件拼接在一起。方便了UI元素的重用，也就是说组件时元素的集合体

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。

这里主要是React Native，混合应用，最接近原生应用；可以跨平台。体验会好一些；也能够调用硬件底层的API。

原生开发：它的英文单词是（NativeApp）,指的就是使用 IOS、Android 官方提供的工具、开发平台、配套语言进行手机App开发的方式；
混合开发：（HybirdApp）就是使用前端已有的技术，HTML + CSS + JS ，然后再搭配一些相关的打包编译技术，就能够开发出一个手机App，安装到手机中进行使用.

高效

虚拟Dom

DOM的本质是什么:就是用js表示的UI元素。Dom是由浏览器提供的功能，所以我们只能使用浏览器提供的API创建Dom对象
虚拟DOM是我们程序员手动模拟的，并不是浏览器提供的
React通过一些API来创建一种特别的js对象，比如： React.createElement()就是一个简单的虚拟Dom
虚拟DOM都会被React转化为真实的DOM.我们编码时只需要操作react虚拟DOM的相关数据，react会转化为真实dom变化更新界面

Diff算法

tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些需要被更新的元素；

component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置；

element diff:在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff；

单向数据流

React遵循从上到下的数据流向，即单向数据流。对于React来说：单向数据流与单一数据源限定了要想在组件中更新另一个组件的状态；需要进行状态提升。(可以类比vue利用$emit来子组件向父组件传值)

单向数据流的理解（简单的单向数据流）
当用户访问了界面或则操作了界面，即view层；view发出用户交互了的action，此时action会对state或则说data进行更新,即model层；state更新了会触发view更新的过程。这样的数据总是单向流动的；便于推测和维护
单向数据流的特点

所有状态的改变可记录、可跟踪，源头易追溯;
组件的数据只要唯一的入口和出口，让组件更直观更容易理解使得组件更容易维护
一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data)
如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
React是单向数据绑定，而vue是双向数据绑定(比如v-model)；当然vue也是单向数据流(vuex)，只是实现了数据的双向绑定。

先了解一下组件的三大属性

state

state是组件对象最重要的属性, 值是对象(可以包含多个数据)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
state是组件私有的数据，如果想要使用组件中 state 上的数据，直接通过 this.state.key 来访问即可，key是属性;修改的话需要this.setState()进行修改

  constructor(props) {
   
   
    super(props)
    this.state = {
   
   
    }
  }

props

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中
通过标签属性从组件外向组件内传递变化的数据
父组件

import React, {
   
    Component } from 'react';
// 子组件，使用props来接收值
function Child(props){
   
   
  return <div>{
   
   JSON.stringify(props)}</div>
}
// 父组件
class App extends Component {
   
   
  constructor(props){
   
   
    super(props)
    this.state =