随笔分类 - 前端学习
摘要：TypeScript编译配置选项 常用选项 { /* include指定哪些ts文件需要被编译 **表示任意文件夹 *表示任意文件 */ "include": [ "./src/**/*" ], /* exclude表示不包含 exclude的默认值为["node_modules","bower_c
阅读全文
摘要：TypeScript变量类型 数字 let a_number: number = 10 字符串 let a_string: string = 'hello' 布尔型 let a_boolean: boolean = true 联合类型 /* 联合类型 */ let b: "male" | "fema
阅读全文
摘要：React中Hook学习 Hook 是 React 16.8 的新增特性。可以在编写函数式组件时使用state以及react中的其他特。 hook为了解决react中原有的问题 组件之间复用状态逻辑很难 复杂组件变得难以理解（例如组件中生命周期被拆分开来写，但是其中的代码相互关联，使得代码变得复杂）
阅读全文
摘要：render props //使用这种方法构建的父子关系组件 <A render={(num)=><B num={num}/>}/> //在A中显示子组件B,并传递props {this.props.render(num)}
阅读全文
摘要：ErrorBoundary 将错误控制在单个组件里面。不影响全局页面 //添加错误边界需要添加在父组件中 //在状态中添加是否出现错误的标识 state={ hasError:'' } //当Parent的子组件出现报错的时候，就会触发该方法 static getDerivedStateFromEr
阅读全文
摘要：Context 方便隔代传递数据 //创建Context对象 const MyContext = React.createContext() //子组件需要使用Provider包裹 <MyContext.Provider value={this.state.username}> <B/> </MyC
阅读全文
摘要：解决Component效率低下的两个问题 执行setState，即使是不改变状态数据，仍然会调用render() 当前组件调用render()时，其子组件也会调用render() 原因：Component中的shouldComponentUpdate()总是返回true 解决方法： 重写should
阅读全文
摘要：hooks stateHook 可以让函数式组件使用state //数组中第一个为state中存的值，第二个为跟新state的方法 //初始化只进行一次 const [num,setNum] = React.useState(0) //两种写法 setNum(num+1) setNum((num)=
阅读全文
摘要：SetState setState跟新状态写法： react后续更新状态的动作是异步的。 对象式setState const {num}=this.state this.setState({num:num+1}) 可以多传入一个回调 const {num}=this.state //异步的回调函数是
阅读全文
摘要：lazyLoad 路由组件的懒加载 // 将组件引入改为使用lazy引入 import {lazy,Suspense} from 'react' // import Topics from './Topics' const Topics = lazy(()=>{import('./Topics')}
阅读全文
摘要：纯函数 一类特别的函数：只要是童谣的输入（实参），必定得到同样的输出（返回） 必须遵守以下约束 1)不得改写参数数据 2）不会产生任何副租用，例如网络请求，输入和输出设备 3）不能调用Date.new()或者Math.random()等不纯的方法 redux的reducer函数必须是一个纯函数
阅读全文
摘要：React路由的学习 react-router主要是通过BOM中的history来实现的。 react-router分为三种 web native any react-router-dom学习 react-router-dom是专门用于web的开发。 简单示例 注意这里的react-router-d
阅读全文
摘要：Fetch发送请求方式 除了xhr方式（JQuery和axios都基于xhr）发送请求以外，还有Fetch方式发送请求 github 地址：https://github.com/github/fetch 老版本的浏览器可能不支持 Fetch关注分离 未优化版本 fetch('').then( //第
阅读全文
摘要：消息订阅-发送机制 可以使用主流的PubSubJS工具库来进行实现 github地址：https://github.com/mroderick/PubSubJS 导入： import PubSub from 'pubsub-js' // or when using CommonJS const Pu
阅读全文
摘要：React脚手架配置代理 方法一 在package.json中添加如下配置 "proxy":"http://localhost:5000" 优点 配置简单，前端请求资源时可以不加任何前缀 缺点 不能同时配置多个代理 当发送请求时，先在自己的服务器中寻找是否存在请求的资源，如果不存在再走代理的通道。
阅读全文
摘要：axios学习 JSON Server安装配置 详见https://www.npmjs.com/package/json-server 安装JSON Server npm install -g json-server 创建db.json文件并写入 { "posts": [ { "id": 1, "t
阅读全文
摘要：Promise学习（二） 使用util中的promisify自动封装err，data类的回调转换为promise风格 //引入fs const fs = require('fs'); //引入util const util = require('util') //将err，data类的的回调转换为p
阅读全文
摘要：Promise学习(1) 异步编程 fs文件操作 require('fs').readFile('./index.html',(err,data)=>{}) 数据库操作 AJAX $.get('/server',(data)=>{}) 定时器 setTimeout(()=>{},2000) Prom
阅读全文
摘要：高阶函数：如果一个函数符合下面两个规范中的任何一个，那么该函数就是高阶函数 1若A函数，接受的参数是另一个函数，那么A就可以被称为高阶函数 2若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式
阅读全文
摘要：react/vue中的key有什么作用？（key的内部原理是什么？） 为什么遍历列表时，key最好不要用index？ 1.虚拟DOM中key的作用： 1）简单的说；key是虚拟DOM对象的标识，在更新现实时key起着极其重要的作用。 2）详细的说；当状态中的数据发生变化时，react会根据【新数据】
阅读全文
浙公网安备 33010602011771号