React全家桶学习笔记

最新推荐文章于 2025-07-25 20:13:26 发布
最新推荐文章于 2025-07-25 20:13:26 发布
阅读量606 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： React 文章标签： React 前端学习 前端入门 React全家桶 Redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45109339/article/details/100929390
这是一份全面的React全家桶学习笔记，涵盖了从React的基本认识、使用到高级特性如Virtual DOM、Redux和React-UI。笔记详细讲解了React组件化编程、生命周期、状态管理以及路由系统，还涉及了如何使用create-react-app创建项目，配置按需打包，并探讨了Redux在异步任务中的应用。

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

React全家桶学习笔记

1. React 的基本认识

React用于构建用户界面的JS库
1.1 React 特点
    1. Declarative
    2. Component-Based
    3. Learn Once, Write Anywhere(支持客户端服务器渲染)
    4. 高效
        4.1 虚拟DOM，不总是直接操作DOM
        4.2 DOM Diff 算法，最小化页面重绘
    5. 单向数据流

2. 使用React

2.1 直接引入
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
2.2 JSX - JavaScript XML
    const v1 = React.createElement("h2", {id:myId.toLowerCase()}, msg.toUpperCase());
    const v2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
2.3 渲染DOM
    ReactDOM.render(v2, document.getElementById("test2"))
    ReactDOM.render(<Person {...p1} />, document.getElementById("test1"));

3. 模块和组件

3.1 模块就是一个js文件，具有特定功能
3.2 组件就是一个界面的局部功能模块 html+css+js+media

4. React 面向组件编程

面向对象 -> 面向模块 -> 面向组件

5. 组件三大属性

5.1 state
5.2 refs - 标识组件内部的元素
5.3 props

6. 添加绑定事件this的指向问题

6.1 构造函数中添加 this.handleClick = this.handleClick.bind(this)
6.2 箭头函数
6.3 onClick={this.handleClick.bind(this)} 效率低，因为每次都会重新渲染

7. 定义组件的两种方式

7.1 工厂模式 function (无状态组件)
7.2 组件类模式 class (有状态组件)

8. 默认属性值和属性类型和必要性的限制

Person.defaultProps = {
    sex:"male",
    age:18
}
自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替
Person.propTypes = {
    name:PropTypes.string.isRequired,
    age:PropTypes.number,
    sex:PropTypes.string
}

9. … 剩余参数 打包和解包

const arr1 = [1, 2, 3]
const arr2 = [6, ...arr1, 9] -> [6, 1, 2, 3, 9]

10. 功能界面组件化编码流程

1. 拆分组件
2. 实现静态组件
3. 实现动态组件
    1. 动态显示初始化数据
    2. 交互功能

11. 表单组件的分类

1. 受控组件：表单项输入的数据自动收集成状态
2. 非受控组件：需要时才手动读取表单输入框的数据，操作DOM（读），写法简洁

12. 组件（对象）生命周期

constructor - 构造器
render - 渲染，只要重新渲染就要调用render
componentDidMount - 挂载完成
componentWillUnmount - 准备结束
第一次初始化
constructor -> componentWillMount -> render() -> componentDidMount
每次更新state
componentWillUpdate -> render() -> componentDidUpdate
移除组件
componentWillUnmount
ReactDOM.unmountComponentAtNode(document.getElementById('app')

13. 编程方式

1. 命名式编程 - 自己控制流程 jQuery
2. 声明式编程

14. Virtual DOM & Diff Algorithm

1. 创建虚拟DOM
2. 真实DOM树
3. 绘制界面显示
4. setState() 更新状态
5. 创建虚拟DOM树
6. 新旧比较差异
7. 更新差异对应的真实DOM

15. React CLI

dependencies - 运行依赖
    react
    react-dom
devDependencies - 开发依赖
    react-scripts
SPA - single page application

16. package.json

1. 标识 name/version
2. 依赖 dependencies/devDependencies 运行依赖和开发依赖
3. 运行命令

17. README.md markdown

应用说明文件

18. React应用（基于React脚手架）

  1. 使用create-react-app 创建react应用
  2. 项目整体技术架构 react+webpack+es6+eslint
  3. 脚手架开发项目的特点：模块化、组件化、工程化
    npm root -g
  4. live reload - 实时刷新
  5. 标签属性：静态属性在左，动态属性在右
  6. axios 请求
    1. axios - 轻量级，建议使用 promise 风格
    2. fetch - 原生函数，老版本不支持，引入兼容fetch.js
  7. 组件间通信
    1. props传递数据
      一般数据 父 -> 子
      函数数据 子 -> 父
    2. 消息订阅和发布机制 subscriber - publisher
      npm install pubsub-js --save
    3. Redux 全局状态管理
  8. react-router / react-ui
  9. SPA 单页面应用 - 局部刷新
  10. 路由系统实现
    npm i --save react-router-dom
    1. browser history push | pop | replace
    2. hash history



    history / match / withRouter 对象 1. 路由组件 2. 非路由组件 路由组件和非路由组件分开 路由组件 -> pages/views 文件 非路由组件 -> components 文件 嵌套路由 如何编写路由效果 1. 编写路由组件 2. 在父路由组件中指定 路由链接 - NavLink 路由 - Route 路由链接和非路由链接 - network 是否发请求
  11. react-ui
    1. material-ui
    2. ant-design

19. React-UI

  1. 按需打包
    npm install react-app-rewired customize-cra --save-dev
    npm install babel-plugin-import --save-dev
    在项目根目录创建一个 config-overrides.js
    const { override, fixBabelImports } = require(‘customize-cra’);
    module.exports = override(
    fixBabelImports(‘import’, {
    libraryName:‘antd-mobile’,
    style:‘css’,
    }),
    );

20. Redux

  1. application-level state manager
  2. npm install --save redux
  3. 核心API
    createStore
  4. store 对象
    1. 内部维护 state reducer
    2. 核心方法
      getState
      dispatch(action)
      subscribe(listener)
  5. redux 三个核心概念
    1. action
      type:“INCREMENT”
      data:数据属性
      Action Creater
      const increment = (number)=>({type:“increment”, data:number})
    2. reducer
      根据老的state和action产生新的state纯函数
      注意：返回新的状态
      不要修改原来的状态
    3. store
      将 state/action/reducer 联系在一起的管理对象
      createStore(reducer)
  6. react组件和redux耦合度高
    解决：react-redux
    npm i --save react-redux
    connect 连接组件和redux
    组件分类：UI组件、容器组件
    UI组件不使用redux API
    容器组件放在containers
    connect(
    mapStateToprops,
    mapDispatchToprops
    )
  7. redux 问题
    redux 默认是不能进行异步处理的
    应用中又需要在redux中执行异步任务(ajax, 定时器)
    解决：redux异步编程
    redux异步中间件
    npm install --save redux-thunk
【学习笔记】React+React全家桶学习笔记
无知的圆的博客
06-29 1686
文章目录1 为什么要使用React2 React的定义3 React的三大特性4 React入门4.1 hello_react4.2 虚拟DOM的创建4.3 JSX4.4 模块与组件，模块化与组件化的理解5 React面向组件编程5.1 基本理解和使用5.2 组件实例的三大核心属性5.2.1 state5.2.2 props5.2.3 ref5.3 React中的事件处理5.4 React中收集表单数据5.4.1 非受控组件与非受控组件5.5 组件的 生命周期5.5.1 效果5.5.2. 挂载与卸载5.5.
【尚硅谷React】——React全家桶笔记
m0_67393413的博客
07-31 860
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
React
林清溯
08-29 404
一、React简介: 1.React概述： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简...
React 项目实战：从 0 到 1 构建高效 GitHub 仓库管理应用 —— 基于 React 全家桶的全栈开发指南
最新发布
2501_92798394的博客
07-25 773
将数据获取逻辑抽离到自定义 Hooks，让组件更专注于 UI 渲染：} })();// 依赖username，参数变化时重新请求 return state;组件中使用：// 直接调用hooks获取数据 if (loading) return <Loading />;本项目通过实现路由管理、处理状态、自定义 hooks 封装逻辑，构建了一个可扩展的 GitHub 仓库管理应用。性能优化：路由懒加载、按需请求数据。代码组织：模块化 API、清晰的目录结构。可维护性：组件职责分离、状态逻辑抽离。
react-reactcnode适合新手的React全家桶项目学习
08-14
react-cnode：适合新手的 React 全家桶项目学习
React全家桶
08-12
react学习资料适合新手入门学和资深进阶学习，分别介绍了基础入门、面向组件编程、react脚手架、react ajax、react-router4、react UI组件库、redux等
【React全家桶】React Hooks
m0_61016904的博客
02-26 1078
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在，因此引入hooksReact的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。使用hooks理由高阶组件为了复用，导致代码层级复杂生命周期的复杂写成functional组件,无状态组件 ，因为需要状态，又改成了class,成本高。
React全家桶详细讲解-图文并茂
2501_90225756的博客
01-18 701
React将state与表单元素值value绑定在一起，有state的值来控制表单元素的值受控组件：值受到react控制的表单元素示例：pandas是基于NumPy的一种工具，该工具是为了解决数据分析任务而创建的。使用步骤在state中添加一个状态，作为表单元素的value值给表单元素绑定change事件，将表单元素的值设置为state的值示例：super()state={txt:‘’})render(){return(
个人 尚硅谷React全家桶学习笔记(1)
qq_54022138的博客
12-26 446
个人 尚硅谷React全家桶学习笔记 （一） B站传送门 1.React简介 React是什么 ​ React是一个将数据渲染为HTML视图的开源JavaScript库。用于构建用户界面的JS库。 React由谁开发的 由Facebook开发，且开源。 1.起初由Facebook的软件工程师Jordan Walke创建。 2.于2011年部署于Facebook的newfeed。 3.随后在2012年部署于Instagram 4.2013年5月宣布开源。 … 为什么要学 原生JS的疼点 1.操作DOM繁
React全家桶+AntD共享单车-后台管理系统开发-笔记-01
mysteryflower的专栏
04-19 1138
第一章 课程导学 对课程整体进行介绍，并且说明学习的必要性。 1-1 导学 产品需求 1、技术选型 2、项目架构 3、项目规范 4、封装项目公共机制 5、提高开发效率 课程概述 React全家桶 React基础知识、生命周期 Router4.0语法讲解 Redux集成开发 AntD UI组件 最实用集成组件 AntD栅格系统 Etable组件封装 BaseForm组...
React全家桶.md
08-13
React全家桶.md
【React全家桶入门之九】图书管理与自动完成
一韬的React实验室
02-07 7293
图书管理还记得搭建项目的时候在db.json文件里写的book吗
react 技术栈（全家桶）学习
Where there is a will there is a way
11-25 482
项目地址 托管在 gitee 上的项目链接 https://gitee.com/uncleAndyChen/react-full-stack-learning 托管在 github 上的项目链接 https://github.com/uncleAndyChen/react-full-stack-learning 项目说明 本项目分享个人学习 react 全家桶技术栈的一些经验心得。 学习过...
React全家桶学习笔记 (一)
weixin_46847041的博客
12-20 533
React全家桶学习笔记 (一) 目录React全家桶学习笔记 (一)一、jsx基本语法二、组件1.函数组件2.类组件3.函数组件与类组件的区别 一、jsx基本语法 (react核心库 react ， react-dom(虚拟dom)， babel(jsx转js)) 一.定义虚拟dom时不要使用引号 二.标签使用表达式使用{} (1)在{}中只能写表达式（注意：语句与表达式的区别） (一)表达式:一个表达式会产生一个值 例: 1.a 2.a+b, 3.
前端系列 - react全家桶
知行
04-27 777
react全家桶笔记总结（1）
qq_54780978的博客
12-29 509
React的特点 1.声明式编码 2.组件化编码 3.React Native 编写原生应用 4.高效（优秀的Diffing算法） React高效的原因 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 DOM Diffing算法, 最小化页面重绘。 安装与创建 安装： npm i create-react-app -g 安装脚手架 create-react-app myreact 创建项目 cd /myreact 进入项目目录 npm start 启动项目 np..
React全家桶(技术栈)
Maynor的博客
01-11 2437
官网中文官网: https://react.docschina.org/介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源React的特点声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值