- 博客(23)
- 收藏
- 关注
RSS订阅原创 react-redux
Getting Started with React Redux | React Redux 1.安装 # If you use npm: npm install react-redux # Or if you use Yarn: yarn add react-redux cnpm i @types/react-redux -D 2.引用 index.tsx import { 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继承RouteComponentProps interface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc: string; price: numb.
2022-04-21 17:16:02
610
原创 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
1153
原创 react-router使用入门
1.安装 cnpm i react-router-dom -S cnpm i @types/react-router-dom -D 2.使用BrowserRouter +Switch +Route import 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.tsx import 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
54
原创 3.react生命周期及其使用场景
State & 生命周期 – React 1.constructor 用于初始化内部状态，很少使用 唯一可以直接修改state的地方 2.getDerivedStateFromProps 16.3引入 当state需要从props初始化时使用 尽量不要使用：维护两者状态一致性会增加复杂度 每次render都会调用 典型场景：表单控件获取默认值 3.componentDidMount UI渲染完成后调用 只执行一次 典型场景：获取外部资源 4.componentWillUnmou.
2022-04-14 11:54:00
294
原创 2.关于jsx
JSX 简介 – React jsx的本质：使用react.createElement jsx 可以使用大括号，来在属性值中插入一个 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
619
原创 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
78
原创 js作用域
全局作用域 函数作用域 词法作用域（静态） 块级作用域（let，const） 参考：面试官：说说作用域和闭包吧 - 掘金 作用域链： 当可执行代码内部访问变量时，会先查找本地作用域，如果找到目标变量即返回，否则会去父级作用域继续查找...一直找到全局作用域。我们把这种作用域的嵌套机制，称为 作用域链。 词法作用域：就意味着函数被定义的时候，它的作用域就已经确定了，和拿到哪里执行没有关系，因此词法作用域也被称为 “静态作用域”。 var value = 1; function foo() {.
2022-04-13 10:17:19
48
原创 原型与原型链
对于对象来说，可以通过__proto__找到一个原型对象 原型的constructor属性指向构造函数，构造函数通过prototype属性指回原型 构造函数通过new，创建实例 所有的对象都可以通过__proto__找到Object 所有的函数都可以通过__proto__找到Function 函数的prototype是一个对象 对象的__proto__属性指向原型，__proto__将对象和原型连接在一起组成了原型链 作用：将公有方法和属性封装在原型中，节约内存 let arr = new A
2022-04-13 10:03:34
48
原创 关于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
129
原创 es6 flat使用及实现
参考文章：面试官连环追问：数组拍平（扁平化） flat 方法实现 - 掘金 使用参考：Array.prototype.flat() - JavaScript | MDN 用途：flat用于拍平嵌套数组，返回一个新数组，对原数组没有影响 使用： 不传入参数，默认拍平一层 传入参数，拍平的层级 参数<=0,返回原数组 参数为Infinity，不管嵌套多少层，都转化为一维数组 如果有空位,flat会跳过空位，（不是指'',null,undefined,是空位！） 实现 判断数组 ...
2022-04-12 21:18:17
570
原创 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
213
原创 es6 空值运算符
之前的写法 if(value !== null && value !== undefined && value !== ''){ } es6 if(value??'' !== ''){ }
2022-04-12 20:29:37
524
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人