react 脚手架 生命周期 | 青训营笔记

东非不开森
91 阅读2分钟

这是我参加【第五届青训营】笔记创作活动的第6天

一、create-react-app

  1. react脚手架：create-react-app
  • 使用node编写，基于webpack
  1. 安装脚手架： npm install create-react-app -g
  2. 创建react项目

    1. create-react-app 项目名称

    2. 项目名称不能包含大写字母

二. 分析脚手架创建的React项目目录结构，并且删除文件后自己编写代码

2.1. public

  • favicon.ico -- 应用程序顶部icon图标
  • index.html -- 应用的index.html入口文件
  • logo192.png -- 在manifest.json中被使用
  • logo512.png -- 在manifest.json中被使用
  • manifest.json -- 与web app配置相关
  • robots.text -- 指定搜索引擎可以或者不可以爬取那些信息

2.2.src

  • App.css -- App组件相关样式
  • App.js -- App组件代码文件
  • App.test.js -- App组件的测试代码文件
  • index.css -- 全局样式文件
  • index.js -- 整个应用程序的入口文件
  • logo.svg -- 启动项目时,所看到的React图标
  • reportWebVitals.js -- 默认帮我们写好的 注册pwa相关的代码
  • setupTests.js -- 测试初始文件

2.3. pwa是什么? 全称Progressive Web App，即渐进式WEB应用

  • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
  • 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
  • 这种Web存在的形式，我们也称之为是 Web App
  • pwa可以将网页添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • pwa实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
  • pwa实现了消息推送

生命周期：很多的失误都有从创建到销毁的整个过程

生命周期阶段

  1. 装载阶段Mount:组件第一次在DOM树中被渲染的过程

  2. 更新过程Update，组件状态发生变化，重新更新渲染的过程

  3. 卸载过程Unmount，组件从DOM树中被移除的过程

生命周期函数：React内部为了还告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数

  • 实现componentDidMount函数，组件已经挂载到DOM上时，回调
  • 实现componentDidUpdate函数，组件已经发生了更新，回调
  • 实现componentWillUnmount函数，组件即将被移除时，回调

React生命周期主要是类的生命周期，函数式组件是没有生命周期函数的

avatar
文章
阅读
粉丝