随笔分类 -  react

React父组件获取子组件方法
摘要:React父组件获取子组件方法 在react的class组件中父组件调用子组件方法直接用ref就可以拿到子组件这个实例,但是在function中,api并没有这么明确,我们需要借助hooks去帮助我们拿到这个实例。 本篇介绍如何运用useRef 与 useImperativeHandel 方法结合 阅读全文
posted @ 2022-10-12 10:17 ygunoil 阅读(449) 评论(0) 推荐(0) 编辑
手写react中的useContext
摘要:https://blog.csdn.net/qq_28992047/article/details/105985257 阅读全文
posted @ 2022-07-14 20:59 ygunoil 阅读(34) 评论(0) 推荐(0) 编辑
手写react中的useMemo和useCallback
摘要:https://www.csdn.net/tags/NtzaQg2sNDA0MzQtYmxvZwO0O0OO0O0O.html http://www.manongjc.com/detail/20-hxqljfikavyujxx.html 阅读全文
posted @ 2022-07-14 20:58 ygunoil 阅读(84) 评论(0) 推荐(0) 编辑
手写react中的useState
摘要:https://blog.csdn.net/Zong_0915/article/details/116709801 https://blog.csdn.net/weixin_46797477/article/details/120875565 https://developer.aliyun.com 阅读全文
posted @ 2022-07-14 20:56 ygunoil 阅读(47) 评论(0) 推荐(0) 编辑
我为什么从Redux迁移到了Mobx
摘要:Redux是一个数据管理层,被广泛用于管理复杂应用的数据。但是实际使用中,Redux的表现差强人意,可以说是不好用。而同时,社区也出现了一些数据管理的方案,Mobx就是其中之一。 Redux的问题 Predictable state container for JavaScript apps 这是 阅读全文
posted @ 2022-07-14 20:53 ygunoil 阅读(69) 评论(0) 推荐(0) 编辑
Vue和React对比学习Hooks
摘要:不知道大家有没有发现随着版本的升级 vue 和 react 越来越像了。 2019年年初,react 在 16.8.x 版本正式具备了 hooks 能力。 2019年6月,尤雨溪提出了关于 vue3 Component API 的提案。笔者理解这其实是 vue 版本的 hooks。 Vue 和 Re 阅读全文
posted @ 2022-07-14 20:45 ygunoil 阅读(515) 评论(0) 推荐(0) 编辑
react中如何自定义hooks
摘要:首先技术栈 react hooks + prop-types + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。 接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要注意哪些东西。 然后说一些复杂组件需要的功能,比如闭合标签内部dom怎么处理,其实 阅读全文
posted @ 2022-07-14 20:36 ygunoil 阅读(1040) 评论(0) 推荐(0) 编辑
react hook 实现use-watch
摘要:import { useEffect, useRef } from 'react'; const defaultCompare = (prev, next) => prev next; export const useWatch = ( callback, value, { initialValue 阅读全文
posted @ 2022-07-14 20:21 ygunoil 阅读(455) 评论(0) 推荐(0) 编辑
React中useEffect return的函数什么时间执行
摘要:import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; function App() { const [visible,setVisible] = useState(true) ret 阅读全文
posted @ 2022-07-14 20:16 ygunoil 阅读(875) 评论(0) 推荐(1) 编辑
基于 styled-components 实现一套皮肤系统
摘要:styled-components 使用模版字符串特性,让我们可以保持原有 CSS 的书写习惯来编写 CSS,同时,利用 ${ props => props.theme.xxx } 的方式,实现皮肤系统中挖空填值的能力。 import styled from "styled-components"; 阅读全文
posted @ 2022-07-04 12:14 ygunoil 阅读(81) 评论(0) 推荐(0) 编辑
css-in-js中的styled-components 使用总结
摘要:一、官网地址 https://www.styled-components.com/二、styled-components 1、styled-components 样式化组件,主要作用是它可以编写实际的CSS代码来设计组件样式,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件,并且 阅读全文
posted @ 2022-07-04 10:56 ygunoil 阅读(467) 评论(0) 推荐(0) 编辑
react 跨模块非父子组件通信 :event bus信
摘要:import { EventEmitter } from 'events' export default new EventEmitter() import React from 'react'; import Bus from 'utils/eventBus' export default fun 阅读全文
posted @ 2022-06-30 10:40 ygunoil 阅读(269) 评论(0) 推荐(0) 编辑
React中函数式组件:map循环,如何给每个元素建立ref
摘要:const giftsMapRef = useRef({}) const giftRef = (ele:HTMLElement, giftId:number) =>{ giftsMapRef.current['gift-'+giftId] = ele; } <div className='gift- 阅读全文
posted @ 2022-06-29 09:56 ygunoil 阅读(538) 评论(0) 推荐(0) 编辑
React中父组件获取子组件数据的3中方式
摘要:一、类组件的情况下 1、定义父组件(直接使用ref) export default class UserRef1 extends Component { constructor(props) { super(props); this.child = React.createRef(); } focu 阅读全文
posted @ 2022-06-29 09:51 ygunoil 阅读(421) 评论(0) 推荐(0) 编辑
vue中和react中key的用法
摘要:我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。 vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:1. 两个相同的组件产生类似的DOM结构,不同的组件产生不 阅读全文
posted @ 2021-08-23 11:50 ygunoil 阅读(73) 评论(0) 推荐(0) 编辑
虚拟dom和real dom区别
摘要:Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构, Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述。 区别: 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改,然后一次性比较 阅读全文
posted @ 2021-08-19 21:57 ygunoil 阅读(316) 评论(0) 推荐(0) 编辑
移动Web App开发之实战美团外卖
摘要:第1章 课程介绍通过课程介绍,了解学习课程的必要性,所包含的知识点,课程安排,学习前提,课程收获,快速全面了解课程。1-1 课程导学第2章 移动web硬知识点本章主要讲解移动web开发中必要掌握的基本知识,是进行后续学习的前提。从概述到开发调试方法,以及viewport视窗概念和原理的讲解,在到移动 阅读全文
posted @ 2021-06-07 11:58 ygunoil 阅读(522) 评论(0) 推荐(0) 编辑
React16+Redux 实战企业级大众点评Web App
摘要:第1章 课程介绍本章主要介绍课程大纲、课程目标,以及开发环境搭建和实战案例演示。 第2章 React项目脚手架:create-react-app本章介绍React生态中最流行的脚手架:Create React App, 包括安装、基本用法、创建Mock数据等。 第3章 React思维方式:跟着Tod 阅读全文
posted @ 2021-06-07 11:57 ygunoil 阅读(252) 评论(0) 推荐(0) 编辑
React劲爆新特性Hooks重构去哪儿网火车票PWA
摘要:第1章 课程简介在这里,你可以知道为什么要学习这门课程,会学习到哪些内容,等等... ...你会了解到学习本课程所需要的先决条件第2章 [操作篇]项目搭建万事万物,都要从项目搭建开始。这一章,你一定要跟着老师一步一步地操作!不然,你可能连门都进不去 ... ...第3章 [新特性]React新特性一 阅读全文
posted @ 2021-06-07 11:55 ygunoil 阅读(203) 评论(1) 推荐(0) 编辑
React+TypeScript高仿AntDesign开发企业级UI组件库
摘要:第1章 课程导学(此章节必看)介绍了整个课程的背景知识,项目简介,学习流程,可以掌握的知识点,以及学习方法和前置知识。第2章 欢迎来到类型的世界 - Typescript本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势,带领大家学习 TS 中的各种基础类型,然后进阶到复杂类型 阅读全文
posted @ 2021-06-07 11:54 ygunoil 阅读(693) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示