鱼翅冰淇淋-CSDN博客

转载 React高阶组件(HOC)的入门及实践

前言作为前端小白中的一员，没接触过 React 高阶组件，首次看到这个名字时不明觉厉，甚至有种“从入门到放弃”的想法。然而，通过深入学习后发现它实际上是一个概念十分简单，但却非常常用的东西。它的作用是能实现代码复用和逻辑抽象、对 state 和 props 进行抽象和操作、对组件进行细化（如添加生命周期）、实现渲染劫持等。正因为高阶组件的实用性，它频繁地被大量 React.js 相关的第三方库，如 React-Redux（用于管理 react 应用的状态，React-Loadable（用.

2021-12-24 18:10:43 321

转载 React性能优化总结

前言目的目前在工作中，大量的项目都是使用react来进行开展的，了解掌握下react的性能优化对项目的体验和可维护性都有很大的好处，下面介绍下在react中可以运用的一些性能优化方式；性能优化思路对于类式组件和函数式组件来看，都可以从以下几个方面去思考如何能够进行性能优化1.减少重新render的次数2.减少渲染的节点3.降低渲染计算量4.合理设计组件减少重新render的次数在react里时间耗时最多的一个地方是reconciliation（reconciliati

2021-12-24 17:43:47 296

原创一些笔记（一）

一、手写Bind函数bind函数：bind()方法创建一个新的函数，当这个新函数被调用时其this置为提供的值，其参数列表前几项置为创建时指定的参数序列。它的一个用处就是用来改变函数this指向。总的来说bind有如下三个功能点：1.改变原函数的 this 指向，即绑定上下文，返回原函数的拷贝2.当绑定函数被调用时，bind的额外参数将置于实参之前传递给被绑定的方法。3.注意，一个绑定函数也能使用 new 操作符创建对象,这种行为就像把原函数当成构造器，thisArg 参数无效。.

2021-11-02 12:02:22 121

原创 git 使用流程规范（merge-request)

git 使用流程规范（merge-request)如果你的git workflow 采用此模式，谨记一定要忘记 git merge,除了在 master 分支上 git pull 可以使用 git pull，其他分支如果要 git pull应该使用 git pull --rebase 使用 git rebase 的黄金法则就是：分支的开发者尽量是一个人，重写提交历史不会影响别人1.新建分支 # 创建分之前，先切换到 master 分支，更新到最新版本，确保你的新分支是基于最新版本的master

2021-07-13 10:31:46 1448

转载 useEffect, useCallback, useMemo三者有何区别？

useEffectuseEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等有了useEffect，我们可以在函数组件中实现像类组件中的生命周期那样某个阶段做某件事情,具有: componentDidMount componentDidUpdate componentWillUnmount 基本用法useEffect(()=>{console.log('这是一个不含依赖...

2021-07-09 11:11:25 5091

转载 TS中的!和?用法

!用法用在变量前表示取反用在赋值的内容后时，使null和undefined类型可以赋值给其他类型并通过编译let y:numbery = null // 无法通过编译y = undefined // 无法通过编译y = null!y = undefined!// 由于x是可选的，因此parma.x的类型为number | undefined，无法传递给number类型的y，因此需要用x!interface IDemo { x?: number}

2021-07-08 10:39:45 741

转载 TypeScript 中 class 的实例成员与静态成员

前言在阅读 TypeScript 文档的时候，经常会看到类的静态属性或者类的类的实例属性等名词，阅读其他篇章可能会出现另一个类的静态成员之类的名词。把文档中的名词提取出来，分析后就可以发现：这些名词就是称呼多，理解起来还是很简单的。版本说明TypeScript 版本为：TypeScript 3.1；文章语法适用于 TypeScript，ES6 语法类似。但 ES6 规定，Class 内部只有静态方法，没有静态属性，但有一个提案提供了类的静态属性。静态和实例静态和实例...

2021-07-07 18:30:56 404

转载 React源码阅读—React.forwardRef

React.forwardRef在有些时候我们想要操作子组件中的DOM节点，说到获取DOM节点，可能我们会第一时间想到ref。可是，如果我们是直接在子组件上写ref，获得的只是子组件，而不是子组件下的某个DOM节点。这个时候就可以通过React.forwardRef来实现。例如：子组件：const Child = React.forwardRef((props,ref)=>( <input ref={ref} />));父组件：class Father exte.

2021-07-07 15:52:36 2523

原创 React Context(上下文) 作用和使用

1.ContextContext 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。有部分小伙伴应该使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢向上寻找最初的值是什么~(手动微笑,恶心吧 )2.API (个人大白话理解)React.createContext：创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Consumer} = React.createCo

2021-07-07 15:27:46 239

m0_57785190的博客