- 博客(23)
- 收藏
- 关注
RSS订阅原创 react-redux
Getting Started with React Redux | React Redux1.安装# If you use npm:npm install react-redux# Or if you use Yarn:yarn add react-reduxcnpm i @types/react-redux -D2.引用 index.tsximport { Provider } from "react-redux";import store from "./redux/
2022-04-21 22:15:37
83
原创 react-router link
import React from "react";import { Image, Typography } from "antd";import { withRouter, RouteComponentProps, Link } from "react-router-dom";interface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc:.
2022-04-21 17:21:35
392
原创 react-router 路由之间数据的传递
1.withRouter（高阶组件HOC）import { withRouter, RouteComponentProps } from "react-router-dom";props继承RouteComponentPropsinterface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc: string; price: numb.
2022-04-21 17:16:02
620
原创 react-router - 在url中添加参数
使用?来引导参数 分段路由segments第二种 <Route path="/detail/:touristRouteId" component={DetailPage} />import React from "react";import { RouteComponentProps } from "react-router-dom";interface MatchParams { touristRouteId: string;}export const Deta
2022-04-21 17:01:00
1157
原创 react-router使用入门
1.安装cnpm i react-router-dom -Scnpm i @types/react-router-dom -D2.使用BrowserRouter +Switch +Routeimport React from 'react';import styles from "./App.module.css";import { BrowserRouter, Route, Switch } from "react-router-dom";import { HomePage ...
2022-04-21 16:42:43
445
原创 自定义Hook案例
1.AddToCart.tsximport React, { useContext } from "react";import { appSetStateContext } from "../AppState";import { RobotProps } from "./Robot";export const useAddToCart = () => { const setState = useContext(appSetStateContext) const addTo
2022-04-21 11:24:41
57
原创 3.react生命周期及其使用场景
State & 生命周期 – React1.constructor用于初始化内部状态，很少使用 唯一可以直接修改state的地方2.getDerivedStateFromProps 16.3引入当state需要从props初始化时使用 尽量不要使用：维护两者状态一致性会增加复杂度 每次render都会调用 典型场景：表单控件获取默认值3.componentDidMountUI渲染完成后调用 只执行一次 典型场景：获取外部资源4.componentWillUnmou.
2022-04-14 11:54:00
296
原创 2.关于jsx
JSX 简介 – Reactjsx的本质：使用react.createElementjsx 可以使用大括号，来在属性值中插入一个 JavaScript 表达式：const element = <img src={user.avatarUrl}></img>;vue {{}}jsx 传入一组属性 延展属性const props = {firstName:'Ben',lastName:'hector'}const greeting = <Greetin
2022-04-14 11:18:33
620
原创 1.react组件入门
react组件一般不提供方法，而是某种状态机 React组件可以理解为纯函数 单向数据绑定组件类型：受控组件 表单元素的状态由使用者维护 < input type = "text"value = { this.StaticRange.value}onChange = { evt => { this.setState({ value: evt.target.value }) }} > < /input> 非
2022-04-14 11:02:38
638
原创 防抖和节流
防抖：在间隔时间内，不管触发多少次回调，都只触发最后一次。 节流：在间隔时间内，不管触发多少次回调，都只触发第一次。防抖实现：利用闭包，setTimeout实现定时，借用apply改变this，执行函数const debounce = (fn,timeout)={ let timer ; return (...args)=>{ if(timer) clearTimeout(timer); timer = setTimeout(()=>{
2022-04-13 10:42:52
49
原创 闭包面试总结
一个函数和对其周围状态的引用捆绑在一起，这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。 --MDN闭包的应用场景：模拟私有属性，函数柯里化闭包易造成内存泄露，解决方案：使用严格模式 及时null，销毁相关事件，使用事件委托，减少内存开销...
2022-04-13 10:23:20
79
原创 js作用域
全局作用域 函数作用域 词法作用域（静态） 块级作用域（let，const）参考：面试官：说说作用域和闭包吧 - 掘金作用域链： 当可执行代码内部访问变量时，会先查找本地作用域，如果找到目标变量即返回，否则会去父级作用域继续查找...一直找到全局作用域。我们把这种作用域的嵌套机制，称为 作用域链。词法作用域：就意味着函数被定义的时候，它的作用域就已经确定了，和拿到哪里执行没有关系，因此词法作用域也被称为 “静态作用域”。var value = 1;function foo() {.
2022-04-13 10:17:19
49
原创 原型与原型链
对于对象来说，可以通过__proto__找到一个原型对象 原型的constructor属性指向构造函数，构造函数通过prototype属性指回原型 构造函数通过new，创建实例所有的对象都可以通过__proto__找到Object 所有的函数都可以通过__proto__找到Function 函数的prototype是一个对象 对象的__proto__属性指向原型，__proto__将对象和原型连接在一起组成了原型链作用：将公有方法和属性封装在原型中，节约内存let arr = new A
2022-04-13 10:03:34
49
原创 关于this
直接调用函数，非严格模式指向window，严格模式下是undefined 对象调用函数，this就是该对象 通过new 创建实例，this绑定在实例上 箭头函数中没有this，取决于包裹箭头函数的普通函数的this，对箭头函数使用bind是无效的 通过bind，call，apply去改变this，值得注意的是，多次bind，this由第一次bind决定优先级：new的优先级最高，然后是bind，call，apply，然后是obj.foo(),最后是直接调用注意，箭头函数的this一旦被绑定就不
2022-04-13 09:38:50
572
原创 实现一个eventBus，发布订阅
class EventEmitter { constructor() { // handlers是一个map，用于存储事件与回调之间的对应关系 this.handlers = {} } // on方法用于安装事件监听器，它接受目标事件名和回调函数作为参数 on(eventName, cb) { // 先检查一下目标事件名有没有对应的监听函数队列 if (!this.handlers[eventName]) { // 如果没有，那么首先初始化一个.
2022-04-12 23:29:22
134
原创 es6 flat使用及实现
参考文章：面试官连环追问：数组拍平（扁平化） flat 方法实现 - 掘金使用参考：Array.prototype.flat() - JavaScript | MDN用途：flat用于拍平嵌套数组，返回一个新数组，对原数组没有影响使用：不传入参数，默认拍平一层 传入参数，拍平的层级 参数<=0,返回原数组 参数为Infinity，不管嵌套多少层，都转化为一维数组 如果有空位,flat会跳过空位，（不是指'',null,undefined,是空位！）实现判断数组 ...
2022-04-12 21:18:17
571
原创 e.target和e.currentTarget的区别
最好基于事件委托去理解<html> <body> <ul id="ul"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
2022-04-12 20:47:12
215
原创 es6 空值运算符
之前的写法if(value !== null && value !== undefined && value !== ''){}es6 if(value??'' !== ''){ }
2022-04-12 20:29:37
526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人