m0_55990909的博客

React Hooks

m0_55990909 — Mon, 22 Aug 2022 01:32:31 +0800

问题：Hook 是什么?一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性使用模式：函数组件 + Hooks特点：从名称上看，Hook 都以 use 开头，useState Hook。

ES6 闭包相关面试题

m0_55990909 — Fri, 13 May 2022 15:00:07 +0800

一、如何产生闭包(closure) 闭包(closure)，是指函数变量可以保存在函数作用域内，因此看起来是函数将变量“包裹”了起来。 //根据定义，包含变量的函数就是闭包也就是函数嵌套函数就可以称之为闭包。作用域应对的特殊情况，有两种表现：函数作为参数被传递函数作为返回值被带回函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系二、闭包的应用场景闭包应用场景1，封装对象的私有属性和方法隐藏数据做一个简单的缓存工具 // 闭包隐藏数据，只提供 API fun

ES6 闭包

m0_55990909 — Fri, 13 May 2022 14:59:36 +0800

闭包一、变量作用域变量根据作用域的不同分为两种：全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕，本作用域内的局部变量会销毁。二、闭包的概念 **闭包函数：**声明一个在函数中的函数，有权访问另一个函数作用域中变量，叫做闭包函数。（函数嵌套函数） **闭包：**内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。 **闭包的主要作用：**延伸了变量的作用范围。演示：从外部访问函数内部的变量三、

ES6 原型和原型链

m0_55990909 — Fri, 13 May 2022 14:59:05 +0800

1、构造函数和原型 prototype （1）原型prototype：每个构造函数都有一个prototype属性，指向一个对象。prototype的本质也是一个JavaScript对象，称为原型对象，这个对象的所有属性和方法都会被构造函数所拥有。因此，可将共用的一些方法直接定义在prototype上，这样所有对象实例就可以共享这些方法；（2)作用：原型prototype的作用是共享方法、节约内存； // 1、构造函数 function Star(uname, age) { this

JS中的this指向

m0_55990909 — Fri, 13 May 2022 14:58:34 +0800

this的概念：在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。箭头函数：箭头函数的this指向于函数作用域所用的对象。一、全局环境下的this指向在全局作用域下，this始终指向全局对象window，无论是否是严格

ES6箭头函数及面试题

m0_55990909 — Fri, 13 May 2022 14:58:07 +0800

箭头函数箭头函数是es6当中对函数的一种全新表示法。其将函数的简洁性发扬到了极致！先来看一个最简单的箭头函数： let fn = a => a var m = prompt() alert(fn(m)) 1. 箭头函数写法一、如果只有一条语句，可以将{}和return省略掉 let fn = a => a+a //相当于 let fn = function(a){ return a+a; } 二、如果语句为多条，则不可以省略{}和return let fn = a =>

ES6 var 、let 和 const 区别

m0_55990909 — Fri, 13 May 2022 14:57:26 +0800

var var 定义的变量可以修改，如果不初始化会输出undefined，不会报错；在相同作用域里，可以重复声明同一个变量; 会声明提升；（ if 内的 {} 不是作用域） let let是块级作用域，函数内部使用let 定义后，对函数外部无影响；在相同作用域里，不可以重复声明同一个变量；声明的变量不会存在变量提升；（ if 内的 {} 是作用域） “暂时性死区”，在代码块内，使用let命令声明变量（或者const声明常量）之前，该变量（常量）都是不可用的。 .

React拓展8-ErrorBoundary错误边界

m0_55990909 — Fri, 06 May 2022 17:12:57 +0800

理解：用于解决子组件出现问题导致整个程序出问题。错误边界：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式： getDerivedStateFromError配合componentDidCatch // 生命周期函数，一旦后台组件报错，就会触发 static getDerivedStateFromError(error) { console.log(error); /

React拓展7-renderProps插槽

m0_55990909 — Fri, 06 May 2022 17:09:17 +0800

类似Vue的插槽，在组件的指定地方预留一个位置，根据需求存放组件，且可以携带参数。如何向组件内部动态传入带内容的结构(标签)? **Vue中：**使用slot插槽技术, 也就是通过组件标签体传入结构 React中： 1.使用children props: 通过组件标签体传入结构 2.使用render props: 通过组件标签属性传入结构, 一般用render函数属性 1. React中的父子组件 2. React中父子组件另一.

React拓展6-PureComponent

m0_55990909 — Fri, 06 May 2022 17:08:44 +0800

用于避免重复渲染（执行render函数），提高效率 Component的2个问题当组件中运行方法setState({})。哪怕该方法的参数为一个空对象，该组件和其子组件都会被重新渲染只当前组件重新render(), 就会自动重新render子组件 ==> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render() 原因 Component中的shouldComponentUpdate()总是返回true 解决方法办法1: 重写shouldC

React全家桶（六）redux状态管理

m0_55990909 — Wed, 27 Apr 2022 16:36:48 +0800

redux状态管理 ✍目录总览： redux 为什么使用Redux：使用react进行大型项目开发时，需要管理的状态不仅数量很多而且相互共享，一个状态多个组件都要共享使用并且渲染，管理不断变化的 state 非常困难。所以我们需要把 state 进行统一管理，这样才能控制每一个state的变化，让我们的程序可读性更强，出错率更低。一、什么是Redux？ Redux 是一个 JS 库，一个状态容器。作用：集中式管理 React 应用中多个组件共享的状态（1）它可以和 react，vue，ang

React全家桶（五）React-router路由

m0_55990909 — Wed, 27 Apr 2022 16:27:57 +0800

React 路由 ✍目录总览：路由基本概念现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多个页面的功能，前端路由应运而生。 SPA的概念 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的html页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展

React拓展5-Context

m0_55990909 — Sun, 24 Apr 2022 10:43:38 +0800

**Context：**一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信 Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。 props传值的缺陷：使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢逐层向上寻找初值。相关API **React.createContext：**创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据 const {Provider, Consumer}

React拓展4-Fragment

m0_55990909 — Sun, 24 Apr 2022 10:42:57 +0800

Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。 Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。 Fragment用来替换最外层div根标签，不在页面中显示，优化结构理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了。就和vue的< template >. .

React拓展3-Hooks

m0_55990909 — Sun, 24 Apr 2022 10:42:06 +0800

1. React Hook/Hooks是什么? Hook是React 16.8.0版本增加的新特性/新语法，可以让你在函数组件中使用 state 以及其他的 React 特性 2. 三个常用的Hook State Hook: React.useState() Effect Hook: React.useEffect() Ref Hook: React.useRef() State Hook State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作语法: const [

React拓展2-路由组件的lazyLoad

m0_55990909 — Sun, 24 Apr 2022 10:41:40 +0800

lazyLoad懒加载：需要使用的时候再进行加载当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求 import {lazy, Suspense} from 'react' import {Route} from 'react-router-dom' //Loading是一般组件，不需要懒加载 import Loading from '.

React拓展1-setState更新状态的2种写法

m0_55990909 — Sun, 24 Apr 2022 10:40:54 +0800

1、对象式的setState setState(stateChange,[callback]) stateChange 为状态改变的对象（该对象可以体现出状态的更改） callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用 import React, { Component } from 'react' export default class Demo extends Compontent { //初始化状态 state =

前后端交互：Git基础

m0_55990909 — Fri, 22 Apr 2022 08:52:47 +0800

✍目录总览： 1. Git基础 1.1 版本管理 1.1.1 什么是版本管理版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。 1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制，不方便多人同时编辑同一个文档，容易产生覆盖 1.1.3 版本控制版本控制是一种记录文件内容变化，以便将来查阅特定版本修订情况的系统。版本控制其实最重要的是可以记录文件修改历史记录，从而让用户能够查看历史版本，方便版本切换 1.1.4 版

前后端交互：Git(分支）

m0_55990909 — Fri, 22 Apr 2022 08:51:49 +0800

2. Git进阶 2.1 、分支为了便于理解，大家暂时可以认为分支就是当前工作目录中代码的一份副本。使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。 2.1.1 什么是分支在版本控制过程中，同时推进多个任务，为每个任务，我们就可以创建每个任务的单独分支使用分支意味着程序员可以把自己的工作从开发主线上分离开来，开发自己分支的时候，不会影响主线分支的运行对于初学者而言，分支可以简单理解为副本，一个分支就是一个单独的副本 2.1.2 分支特点同时并行推进多个功能开发，提高开发效率。

React全家桶（四）axios请求数据

m0_55990909 — Tue, 19 Apr 2022 19:47:09 +0800

React请求接口数据一、React ajax React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，react应用中需要集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端 fetch: 原生函数, 但老版本浏览器不支持，不再使用XmlH