02 2022 档案
摘要：我对于ts并没有系统的学习过，都是碰到一点查文档。今天看了jeesite开源的vue3后台，发现他里面hooks用到了UnwrapRef，我点开源码发现看不懂extends的三元运算符和infer 上网查了学习下，写篇文档记录下。可以在ts官网2.8新特性中查看 借用官方的例子，就是对类型进行判断，
阅读全文
摘要：学了一个礼拜的React，刚好看到了公司里的小程序项目，里面有个登录获取验证码倒计时的按钮，就想用hooks实现下。 首先分析需求，组件内需要三个变量，分别存储文字，按钮状态和倒计时时间。 const [content, setContent] = useState('获取验证码') const [
阅读全文
摘要：现在开始学习useEffect 一般我们会在Effect中 从API获取数据 初始化反应外的DOM插件（例如映射，我们将在下一个项目中看到它） 更改页面标题（在浏览器选项卡中显示的页面） 订阅用户以实现聊天服务（使用WebSockets） useEffect返回值可以清除效果，比如在页面加载时添加了
阅读全文
摘要：现在开始正式学习React的脚手架 Create React App（或 CRA）是一种官方支持的创建单页 React 应用程序的方式。这意味着它由 React 支持和维护，并且它是开始构建单页 React 应用程序的一种更简单的方法。 单页应用程序是使用单个 index.html 构建的网站，Ja
阅读全文
摘要：在原生的input中，可以对value进行修改 而在React中 需要使用defalutValue代替 如何获取React Input文本值 可以调用onChange事件 也可以使用内联函数 实现Input的双向绑定类似v-model 创建一个响应式数据 给它一个默认值“”，空字符串 将数据指向va
阅读全文
摘要：hooks的规则 只在React函数中调用 只在顶层调用hooks，并且不要在循环，条件判断或嵌套函数中调用hooks 正常调用： 错误调用： 首先需要探讨为什么React需要不可变，也就是单向数据循环 上面是一段React的代码，先把setData函数转化 实际上React对于响应式数据做了一层浅
阅读全文
摘要：正式开始学习hooks 首先是useState State指的是组件内定义的任何状态，当状态更新时，ReactDOM 会高效地自动将组件重新渲染到 DOM。 一般导入useState有两种 一般在页面中会给useState传入一个初始值useState(initial_value) 一般可以从use
阅读全文
摘要：数组中的结构 进一步学习数组结构 可以直接对函数返回值结构 章节回顾：
阅读全文
摘要：在React扩展运算符的使用 在普通的js中扩展运算符可以这么用 在React，扩展运算符也可以获取props 很多时候可以对不重要的props去传值 题目： 章节回顾
阅读全文
摘要：继续学习React，今天学习的是JSX陷阱。 一般在js中注释都为 然而在jsx中注释为 有时用函数组件想返回空，像不返回，返回undefined和返回空（return ;）都是无效的 正确的做法是返回null，这样才会返回一个空的组件 接下来是题目： 当不提供user props时，返回空组件。
阅读全文
摘要：之前体验了下React Tutorial.app这个网站，感觉学起来蛮不错的，学到jsx基础后需要付费，学生价580，狠了狠心决定买了，就当是学习投资了。 当然钱不能浪费，这也是我开始写这系列博客的初衷。现在开始记录自己学React的经历。 今天从Pure functions纯函数开始 在React
阅读全文
摘要：首先是笔试，一共十三道题，时间半小时。 第一题字符串去重，直接使用ES6的Set很简单， var str = 'dkhawdlakw4dwadkn' console.log([...new Set([...str])].join('')); 第二题考CSS的多种垂直居中，我就写了两种我常用的，一个是
阅读全文
摘要：今天在掘金上看到一篇实现翻页时钟的文章，看完后收获很大。作者Mr_兔子先生，链接：https://juejin.cn/post/6844904003889790983。 他的思路是利用伪类元素实现，这样减少了HTML的结构 <div class="flip" id="flip"> <div clas
阅读全文
摘要：在ES6中增加了let和const来声明变量 它们声明的变量只在其声明的块或子块中可用 let toPrint = 'Hello World.'; { let toPrint = 'Goodbye World.'; } console.log(toPrint); // Prints 'Hello W
阅读全文
摘要：ES6中增加了``（反引号）用来声明字符串 用反引号包裹的字符串是模板字符串 模板字符串可以多行显示 const TemplateLiterals = `TemplateLiterals TemplateLiterals TemplateLiterals TemplateLiterals ` 模板字
阅读全文
摘要：使用箭头函数可以很好的避免this指向问题 箭头函数this默认绑定外层父级作用域，并且this不能使用call，apply或reflection修改 const noop = () => {} () => expr or (p1, p2) => expr。当函数没有参数或两个及以上的参数时需要使用
阅读全文
摘要：剩余参数可以很好的取代arguments 例如 function foo (...everything) {} everything是一个包含了foo函数所有参数的数组 或者 function foo (bar, ...rest) {} rest是一个包含除bar所有参数的数组 注意：剩余参数一定要
阅读全文
摘要：结构解构可以分为数组，对象和函数 对象的话有以下几种 var { foo } = pony //等同于var foo = pony.foo var { foo: baz } = pony //等同于var baz = pony.foo var { foo = 'bar' } = baz //baz.
阅读全文
摘要：在vue中实现一个hook，在mounted添加事件监听，页面销毁时移除。 默认函数有四个参数[target, type, listener, options] target是EventTarget，作为注册监听器的容器，默认是window 后三个参数是addEventListener的参数 exp
阅读全文