飞羽逐星-CSDN博客

原创 react学习—DebugValueHook

DebugValueHook一、DebugValueHook一、DebugValueHookuseDebugValue：用于将自定义Hook的关联数据显示到调试栏function useTest(){ const [students, ] = useState([]) return students;}export default function App() { useState(0) useState("abc") useEffect(() =>

2021-11-28 15:37:15 770

原创 Diff算法—前端框架的基石

Diff算法—前端框架的基石一、Diff算法一、Diff算法什么是Diff算法——比较差异算法（找出必须要更新的DOM的办法）。比较什么差异——DOM树差异。如何比较——用js模拟真实dom（virtual dom—虚拟DOM），比较DOM树变化前后的差异虚拟DOM就是利用js运行速度快的这一优点对操作DOM进行优化的，用js模拟DOM树把DOM的对比，放在Js层来做。提高重绘性能。真实DOM虚拟DOMDiff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部

2021-10-17 21:10:34 773

原创 react学习—LayoutEffectHook

LayoutEffectHook一、LayoutEffectHook2、注意一、LayoutEffectHook如果我们需要在页面刷新前一刻操作Dom等，从生命周期来看很明显可以使用componentDidMount或者componentDidUpdate，但是在函数组件当中我们没办法使用这些生命周期函数该怎么办呢？于是react提供了LayoutEffectHook。该函数的用法和useEffect是一样import React, { useState, useLayoutEffect, u

2021-07-11 22:30:33 537

原创 react学习—ImperativeHandle Hook

这里写目录标题一、ImperativeHandle Hook1、情景想象2、功能实现一、ImperativeHandle Hook1、情景想象如果某种情况下你需要手动触发某个组件内部的方法时，你会怎么做呢？很容易想到使用ref调动该组件的事件即可，但是这里使用的是类组件，学习了hook后我们发现函数组件更加好用，那么我们怎么能够调用函数组件中的事件呢？import React, { useRef } from 'react'class Test extends React.Component

2021-07-11 22:19:58 333

原创 react学习—ref Hook

ref Hook一、ref Hook一、ref HookuseRef函数：一个参数：默认值返回一个固定的对象，{current: 值}import React, { createRef, useState } from 'react'export default function App() { const inpRef = createRef; const [n, setN] = useState(0); return ( <div> <input re

2021-05-23 21:08:43 911 5

原创 react学习—Memo Hook

Memo Hook一、Memo Hook一、Memo Hook用于保持一些比较稳定的数据，通常用于性能优化如果React元素本身的引用没有发生变化，一定不会重新渲染例：import React, { useState, useCallback } from 'react'function Item(props) { return <li>{props.value}</li>}export default function App() { const [range,

2021-05-18 11:24:29 316

原创 react学习—Callback Hook

Callback Hook一、Callback Hook一、Callback Hook函数名：useCallback用于得到一个固定引用值的函数，通常用它进行性能优化useCallback:该函数有两个参数：函数，useCallback会固定该函数的引用，只要依赖项没有发生变化，则始终返回之前函数的地址数组，记录依赖项该函数返回：引用相对固定的函数地址例：//App.jsimport React, { useState } from 'react'class Test exten

2021-05-18 10:42:00 620 1

原创 react学习—Context Hook

Context Hook一、Context Hook一、Context Hook按之前学习的知识，我们使用上下文的话import React from 'react'const ctx = React.createContext()function Test() { return <ctx.Consumer> {value => <h1>Test上下文：{value}</h1>} </ctx.Consumer>}exp

2021-05-17 23:52:51 345

原创 react学习—Reducer Hook

Reducer Hook一、Reducer Hook一、Reducer HookFlux：Facebook出品的一个数据流框架规定了数据是单向流动的数据存储在数据仓库中（目前，可以认为state就是一个存储数据的仓库）action是改变数据的唯一原因（本质上就是一个对象，action有两个属性）type：字符串，动作的类型payload：任意类型，动作发生后的附加信息例如，如果是添加一个学生，action可以描述为：{ type:"addStudent", payload: {学生对

2021-05-17 12:49:49 722

原创 react学习—自定义Hook

自定义Hook一、自定义Hook一、自定义HookState Hook： useStateEffect Hook：useEffect自定义Hook：将一些常用的、跨越多个组件的Hook功能，抽离出去形成一个函数，该函数就是自定义Hook，自定义Hook，由于其内部需要使用Hook功能，所以它本身也需要按照Hook的规则实现：函数名必须以use开头调用自定义Hook函数时，应该放到顶层例如：很多组件都需要在第一次加载完成后，获取所有学生数据//useAllStudentsimpor

2021-05-17 08:51:45 383

原创 react学习—Effect Hook

Effect Hook一、Effect Hook2、细节一、Effect HookEffect Hook：用于在函数组件中处理副作用副作用：ajax请求计时器其他异步操作更改真实DOM对象本地存储其他会对外部产生影响的操作import React,{useState,useEffect} from 'react'export default function App() { const [n,setN] = useState(0); //改变网页标题就属于副作用，所以在E

2021-05-16 23:10:09 519 2

原创 react学习—State Hook

State Hook一、State Hook1、useState2、useState原理3、注意的细节一、State Hook1、useStateState Hook是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态useState函数有一个参数，这个参数的值表示状态的默认值函数的返回值是一个数组，该数组一定包含两项第一项：当前状态的值第二项：改变状态的函数一个函数组件中可以有多个状态，这种做法非常有利于横向切分关注点。在类组件中写一个加减器：clas

2021-05-16 17:45:22 258 1

原创 react学习—了解Hook

了解Hook一、HOOK简介一、HOOK简介HOOK是React16.8.0之后出现组件：无状态组件（函数组件）、类组件类组件中的麻烦：this指向问题繁琐的生命周期其他问题HOOK专门用于增强函数组件的功能（HOOK在类组件中是不能使用的），使之理论上可以成为类组件的替代品官方强调：没有必要更改已经完成的类组件，官方目前没有计划取消类组件，只是鼓励使用函数组件HOOK（钩子）本质上是一个函数(命名上总是以use开头)，该函数可以挂载任何功能HOOK种类：useSt

2021-05-16 14:59:43 172

原创 react学习—常用工具

常用工具一、常用工具1、严格模式2、Profiler一、常用工具1、严格模式StrictMode(React.StrictMode)，本质是一个组件，该组件不进行UI渲染（React.Fragment <> </>），它的作用是，在渲染内部组件时，发现不合适的代码。识别不安全的生命周期//Appimport React, { Component } from 'react'export default class App extends Component {

2021-05-16 13:16:26 274

原创 react学习—渲染过程（更新和卸载）

这里写目录标题一、渲染过程1、更新一、渲染过程1、更新更新的场景：重新调用ReactDOM.render，触发根节点更新在类组件的实例对象中调用setState，会导致该实例所在的节点更新节点的更新如果调用的是ReactDOM.render，进入根节点的对比（diff）更新如果调用的是setState运行生命周期函数，static getDerivedStateFromProps运行shouldComponentUpdate，如果该函数返回false，终止当前流程

2021-05-15 23:56:44 394

原创 react学习—渲染过程（首次渲染）

渲染过程一、渲染过程1、渲染原理2、首次渲染(新节点渲染)一、渲染过程1、渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象React元素：React Element，通过React.createElement创建（语法糖：JSX）例如：<div><h1>标题</h1></div><App />React节点：专门用于渲染到UI界面的对象，React会通过React元素，创建React节点，ReactD

2021-05-15 15:23:10 1184

原创 react学习—React事件

React事件1.React中的事件1.React中的事件这里的事件：React内置的DOM组件中的事件给document注册事件几乎所有的元素的事件处理，均在document的事件中处理一些不冒泡的事件，是直接在元素上监听一些document上面没有的事件，直接在元素上监听在document的事件处理，React会根据虚拟DOM树的完成事件函数的调用React的事件参数，并非真实的DOM事件参数，是React合成的一个对象，该对象类似于真实DOM的事件参数stopPropaga

2021-05-14 18:03:22 359 1

原创 react学习—边界错误

边界错误一、边界错误1、使用错误边界一、边界错误默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载import React from 'react'import ErrorBound from "./components/common/ErrorBound"function Comp1() { return <div style={{ width: "90%", height: 500, border

2021-05-14 17:29:13 836 5

原创 react学习—Portals

Portals一、Portals一、Portals插槽：将一个React元素渲染到指定的DOM容器中ReactDOM.createPortal(React元素, 真实的DOM容器)，该函数返回一个React元素//public<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBL

2021-05-14 15:28:48 402

原创 react学习—Render props

这里写目录标题一、Render props1、场景2、render props一、Render props1、场景import React, { PureComponent } from 'react'import "./style.css"export default class MovablePanel extends PureComponent { state = { x: 0, y: 0 } divRef = React.cre

2021-05-14 15:07:36 253

原创 react学习—PureComponent纯组件

PureComponent纯组件一、PureComponent纯组件1、任务列表2、添加任务3、性能优化1.使用PureComponent一、PureComponent纯组件纯组件用于避免不必要的渲染（render函数），提高效率1、任务列表//Task.jsimport React, { Component } from 'react'import PropTypes from "prop-types"import './Task.css'export default class Tas

2021-05-14 11:53:41 695 3

原创 react学习—新版Context

这里写目录标题一、新版Context1、创建上下文一、新版Context旧版API存在严重的效率问题，并且容易导致滥用1、创建上下文上下文是一个独立于组件的对象，该对象通过React.createContext(默认值)创建返回的是一个包含两个属性的对象Provider属性：生产者。一个组件，该组件会创建一个上下文，该组件有一个value属性，通过该属性，可以为其数据赋值import React, { Component } from 'react'const ctx = React.c

2021-05-13 18:00:41 433 4

原创 react学习—旧版Context

旧版Context一、旧版Context1、声明Context2、使用Context一、旧版Context1、声明Context上下文：Context，表示做某一些事情的环境React中的上下文特点：当某个组件创建了上下文后，上下文中的数据，会被所有后代组件共享如果某个组件依赖了上下文，会导致该组件不再纯粹（外部数据仅来源于属性props）一般情况下，用于第三方组件（通用组件）import React, { Component } from 'react'import PropType

2021-05-06 00:18:40 336 3

原创 react学习—ref转发

ref转发一、ref转发1、函数组件转发2、类组件转发3、实例一、ref转发前面我们将ref时提到了，ref并不能作用于函数组件，因为react觉得函数组件只返回一个dom并没有多大意义。那么如果我们一定要对函数组件使用ref怎么办呢？1、函数组件转发import React, { Component } from 'react'function A(props) { return ( <div> <span>{props.words}</s

2021-05-05 11:33:05 750 2

原创 react学习—ref

ref一、ref1、ref基础2、ref标记一个组件3、ref使用对象4、ref使用函数1.行间函数2.声明调用一、ref1、ref基础如果我们需要通过一些操作获取某些dom元素怎么办呢？如点击按钮使得输入框对焦，用js的document当然可以，但是react中提供了更好地方法ref。import React, { Component } from 'react'export default class Comp extends Component { handleClick = ()

2021-04-29 00:15:25 216

原创 react学习—高阶组件HOC

高阶组件HOC一、高阶组件HOC一、高阶组件HOCHOF：Higher-Order Function, 高阶函数，以函数作为参数，并返回一个函数HOC: Higher-Order Component, 高阶组件，以组件作为参数，并返回一个组件

2021-04-26 16:56:06 416

原创 react学习—属性默认值和类型验证

属性默认值和类型验证一、属性默认值1、函数组件属性默认值2、类组件默认属性值二、属性类型验证1、常见值类型2、是否必传isRequired3、其它类型验证4、自定义验证一、属性默认值通过一个静态属性defaultProps告知react属性默认值1、函数组件属性默认值//FuncDefault.jsimport React from 'react'export default function FuncDefault(props) { return ( <div>

2021-04-25 15:07:18 847

原创 react—表单

表单一、表单1、value1.defaultValue2.onChange3.灵活使用2、checked一、表单受控组件和非受控组件受控组件：组件的使用者，有能力完全控制该组件的行为和内容。通常情况下，受控组件往往没有自身的状态，其内容完全收到属性的控制。非受控组件：组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。表单组件，默认情况下是非受控组件，一旦设置了表单组件的value属性，则其变为受控组件(单选和多选框需要设置checked)1、value//app.

2021-04-21 11:15:10 435

原创 react学习—传递元素内容

传递元素内容一、传递元素内容一、传递元素内容前面我们学习了传递一些属性给自定义组件，这里我们学习传递元素给自定义组件。//Comp组件export default function Comp(props) { console.log(props); return ( <div className="comp"> <h1>组件自身的内容</h1> {props.html || <h

2021-04-18 18:48:33 357

原创 react学习—新版生命周期

新版生命周期一、新版生命周期1.getDerivedStateFromProps2.getSnapshotBeforeUpdate一、新版生命周期React >= 16.0.0相比旧版生命周期：挂在阶段，新版移除了componentWillMount，使用getDerivedStateFromProps代替。更新阶段，新版移除了componentWillReceiveProps，仍然使用getDerivedStateFromProps。移除了componentWillUpdate，新增了r

2021-04-18 18:30:48 453

原创 react学习—旧版生命周期

旧版生命周期1、旧版生命周期1.初始化阶段constructor2.组件即将挂载componentWillMount3.虚拟DOM render4.虚拟DOM已挂载到页面成为真实DOM5.componentWillReceiveProps6.shouldComponentUpdate7.componentWillUpdate8.componentDidUpdate9.componentWillUnmount生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供

2021-04-18 17:11:03 323

原创 react学习—深入剖析setState

深入剖析setState一、深入剖析setState1、setState是同步还是异步2、如何及时获取异步后的状态值3、react的render优化一、深入剖析setState1、setState是同步还是异步情景//index.jaimport React from 'react';import ReactDOM from 'react-dom';import Comp from './Comp'ReactDOM.render(<Comp n={0} />, document

2021-04-18 11:30:20 188

原创 react学习—事件

事件一、事件1、内置组件事件2、自定义组件事件一、事件在React中，组件的事件，本质上就是一个属性按照之前React对组件的约定，由于事件本质上是一个属性，因此也需要使用小驼峰命名法1、内置组件事件import React from 'react';import ReactDOM from 'react-dom';function handleClick(e){ console.log("点击了！");}const btn = <button onClick={handle

2021-04-17 23:08:11 332

原创 react学习—组件状态

组件状态一、组件状态1、状态初始化2、状态的变化一、组件状态//components/Timer.jsimport React, { Component } from 'react'export default class Tick extends Component { render() { return (<h1>{this.props.time}</h1>); }}//index.jsimport React from 'react';imp

2021-04-17 17:24:48 417

原创 react学习—组件和组件属性

组件和组件属性一、组件1、函数组件2、类组件二、属性1、函数组件的属性2、类组件的属性3、组件无法改变自身的属性一、组件1、函数组件返回一个React元素可以将函数组件直接在表达式中执行。（不推荐）function MyFuncComp(){ return <h1>h1标签</h1>}ReactDOM.render(<div>{MyFuncComp()}</div>, document.getElementById('root'));因

2021-04-17 14:51:31 389

原创 react学习—JSX

JSX一、JSX1、什么是JSX2、在JSX中嵌入表达式一、JSX1、什么是JSXFacebook起草的JS扩展语法本质是一个JS对象，会被babel编译，最终会被转换为React.createElementconst h1 = <h1>hello world <span>span</span></h1>;ReactDOM.render(h1, document.getElementById("root"));实际是因为babel将jsx

2021-04-17 00:14:49 291 1

原创 react学习—搭建脚手架和开发环境配置

搭建脚手架一、搭建脚手架1、使用脚手架搭建工程2、创建项目二、开发环境配置一、搭建脚手架1、使用脚手架搭建工程react常用搭建方式有两种：官方：create-react-app第三方：next.js、umijs这里我们刚开始接触react，所以使用官方的脚手架。2、创建项目使用yarn create react-app ***即可创建react项目，如果未安装yarn，可使用npm install -g yarn命令先安装yarn。接着使用yarn start启动我们的react工程。

2021-04-15 23:59:19 369 1

原创 react学习—hello world

hello world一、初用react1、React.createElement2、JSX一、初用react1、React.createElement<div id="root"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><!-- 依赖

2021-04-14 23:55:10 397 4

原创 react学习—React概述

React概述一、什么是React？二、React的特点1、对比Vue一、什么是React？React是由Facebook研发的、用于解决UI复杂度的开源JavaScript库，目前由React联合社区维护。它不是框架，只是为了解决UI复杂度而诞生的一个库二、React的特点轻量：React的开发版所有源码（包含注释）仅3000多行原生：所有的React的代码都是用原生JS书写而成的，（几乎）不依赖其他任何库易扩展：React对代码的封装程度较低，也没有过多的使用魔法（vue的defin

2021-04-14 22:55:49 355

原创 vue3学习—CompositionAPI

CompositionAPI一、CompositionAPI1、setup2、生命周期函数1.renderTracked2.renderTriggered3、composition api相比于option api有哪些优势一、CompositionAPI不同于reactivity api，composition api提供的函数很多是与组件深度绑定的，不能脱离组件而存在。1、setup// componentexport default { setup(props, context){

2021-04-11 17:39:24 440