前端
关注
分享
扫一扫
蓝胖子（liaocan.top）
只有坚持，勇敢，专注和定力才能收获自己的的一片天空,个人博客网站 https://liaocan.top
展开
-
pdf在线预览方案
1.方案一：直接预览pdf,react-pdf 加载慢，性能差，但是最简单，直接加载整个pdf2.方案二：pdf2svg,转成图片，然后可以进行懒加载pdf2svg <in file.pdf> <out file.svg> [<page no>]3.方案三：模仿百度pdf2html展示，但是文档处理技术不完善为什么要使用HTML5？ BuildV...原创 2019-01-19 17:13:51 · 907 阅读 · 0 评论 -
redux的store,action,reducer小结
1.store是唯一的2.store只能自己改变自己的内容，只能通过dispatch3.reducer 是纯函数，输入参数确定输出结果，并且相同输入参数多次执行输出结果一致，不能依赖外部可变的条件如：时间，异步请求，没有副作用，不会修改传入参数值4.APIcreateStore(reducer,..)store.dispatch(action)store.subscribe...原创 2019-01-21 09:22:29 · 467 阅读 · 0 评论 -
23.react中UI组件，容器组件，无状态组件用法和区别
import React, { Component } from 'react'import 'antd/dist/antd.css'import { Input, Button, List } from 'antd'//无状态组件 没有生命周期，本身只是一个函数，效率比UI组建高，只有一个render方法时可以考虑使用无状态组件const TodolistUI = (props)...原创 2019-01-21 09:22:52 · 550 阅读 · 0 评论 -
24.redux-thunk的使用
1.github上搜索redux-thunk,他是redux的中间件，作用主要是让dispatch(action) 方法可以传入一个函数，而不一定是action对象准确的来说是传入的函数的返回值 可以是一个方法或者函数 不一定是action对象 只是这个函数能够接收到dispatch 对象return的时候在执行一下 dispatch(aciton) 这个时候就可以是一个对象了相当于在di...原创 2019-01-21 09:23:02 · 477 阅读 · 0 评论 -
25.redux中间件redux-thunk和redux-saga
redux-thunk通过对dispatch进行升级，让dispatch可以接收函数redux-thunk可以将异步逻辑放在actionCreator里面redux-saga和redux-thunk作用类似store action的中间redux-saga提供许多api put takeEvey takeLast ..redux-thunk 只是让dispatch 可以接收函数...原创 2019-01-22 15:27:13 · 418 阅读 · 0 评论 -
26.react-redux和redux的区别
redux使用回顾和核心1.组件如何触发store中的state改变createStore(reducer)引入storestore.dispatch（action）方法reducer根据不同action type 返回新的state部分2.组件如何监听store的改变从而改变自身的props组件通过store.subscribe(回调方法)方法监听store的改变...原创 2019-01-22 15:27:40 · 3630 阅读 · 0 评论 -
react-router和react-router-dom区别
react-router-v4，我称之为“第四代react-router”，react-router和react-router-dom的区别是什么呢？为什么有时候我们看到如下的写法：写法1:import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';写法2:import {Switch, R...原创 2019-01-22 15:28:07 · 2556 阅读 · 0 评论 -
react开发中遇到的问题
1.Element type is invalid expected a string (for built-in components) or a classfuElement type is invalid: expected a string (for built-in components) or a class/function (for compos {/* <Rou...原创 2019-01-22 15:27:58 · 3259 阅读 · 0 评论 -
JS原型链
1.创建对象几种方法<!DOCTYPE html><html><head><meta charset="utf-8"><title>原型链</title></head><body> <script type="原创 2019-01-22 15:27:28 · 163 阅读 · 0 评论 -
个人收集的IT技术网站集合，涉及web前后端，大数据，UI设计等。
IT技术网站直通车个人收集的IT技术网站集合，涉及web前后端，大数据，UI设计等。并持续更新中……个人主页 https://liaocan.topweb后端springhttps://spring.io/https://start.spring.io/https://spring.io/projects/spring-boothttps://springcloud.cc/s...原创 2019-03-07 16:22:47 · 947 阅读 · 0 评论 -
[前端] React.js绑定this的5种方法
This is already quite flexible in javascript, and putting it in React makes our choice even more confusing. Let’s look at five binding methods for React this.Use React. createClassIf you are usin...原创 2019-03-15 22:58:10 · 446 阅读 · 0 评论 -
[前端] 前端路由优缺点以及实现
前言ssm时代，多页面时代，需要页面渲染模板，如 freemark,jsp 等模板引擎。前后端没有分离时，路由是由后端处理的，浏览器接收到 .do .action的请求，传到后台对应 spring mvc 会进行逻辑处理返回对应的页面，实现路由的分发 return **.jsp 或者 return modelandview对象,封装了实体数据和视图渲染的模板单页应用时代，只有一个html...原创 2019-03-15 23:00:06 · 10614 阅读 · 1 评论 -
巧用gh-pages分支发布自己的静态项目
大家都知道可以通过github pages 发布自己的静态博客，然后通过 username.github.io 可以访问。例如我的博客可以通过 nqmysb.github.io 访问，不过我的已经绑定域名 https://liaocan.top ，所以会直接跳转到域名显示。但是我们通常由很多其他的静态项目需要展示，所以今天我总结一下如何利用gh-pages分支来发布自己的静态项目，然后可...原创 2019-03-23 17:13:18 · 7828 阅读 · 4 评论 -
弄懂js原型链-对象创建
创建对象几种方法第一种方式：字面量 var o1 = {name: 'o1'}; var o2 = new Object({name: 'o2'});第二种方式：构造函数 var M = function (name) { this.name = name; }; var o3 = new M('o3');第三种方式：Object.create ...原创 2019-04-04 16:41:56 · 559 阅读 · 0 评论 -
基于D3.js绘图组件的后端架构师技术栈图谱树
基于D3.js绘图组件的后端架构师技术栈图谱树组件效果GitHub项目传送门https://github.com/nqmysb/knowledge_graph效果预览地址https://liaocan.top/knowledge_graph/原创 2019-04-16 21:02:14 · 372 阅读 · 0 评论 -
JS深拷贝和浅拷贝
赋值运算符 = 实现的是浅拷贝，只拷贝对象的引用值；JavaScript 中数组和对象自带的拷贝方法都是“首层浅拷贝”；JSON.stringify 实现的是深拷贝，但是对目标对象有要求（非 undefined，function）；cont cloneStr = JSON.parse(JSON.stringify(orginStr))若想真正意义上的深拷贝，请递归。 ...原创 2019-01-21 09:22:17 · 156 阅读 · 1 评论 -
19.import export 的使用
export 可以导出多个 default 只有一个 ，并且default 的在import的时候不能使用 {} 其他的必须用{} 并且可以重命名 默认导出const store = createStore(reducer);export default storeimport store from './store/store.js' 普通导出export con...原创 2019-01-21 09:21:51 · 624 阅读 · 1 评论 -
@connect 装饰器使用问题
添加装饰器支持@connectcnpm install babel-plugin-transform-decorators-legacy --save-devcnpm install @babel/plugin-proposal-decorators --save-dev"plugins": [["@babel/plugin-proposal-decorators", { "leg...原创 2019-01-19 17:15:05 · 1817 阅读 · 1 评论 -
create-react-app 按需加载antd出错问题解决
按需加载antd的实现方式：用create-react-app 创建项目后，如果需要第三方的插件库，需要配置wabpack配置文件， 1、首先运行npm run eject或yarn eject暴露出webpack的配置文件：项目会多出config和scripts文件夹 2、安装完antd和babel-plugin-import后，修改根目录下的package.json b...原创 2019-01-19 17:19:16 · 832 阅读 · 0 评论 -
浏览器关闭后，Session和cookie？
当浏览器关闭时，Session就被销毁了？我们知道Session是JSP的九大内置对象（也叫隐含对象）中的一个，它的作用是可以保存当前用户的状态信息，初学它的时候，认为Session的生命周期是从打开一个浏览器窗口发送请求到关闭浏览器窗口，但其实这种说法是不正确的！下面就具体的去解释：当用户第一次访问Web应用中支持Session的某个网页时，就会开始一个新的Session，那...原创 2019-01-19 17:22:19 · 1430 阅读 · 0 评论 -
1.react的认识
react fiber 是react16之后提出的一种组建渲染架构，可以实现组建的异步渲染组建的渲染以render 方法作为分界线 分为两个部分 前一个部分是可以被打断的，可能会让线程去做更加重要的事情所以render之前的生命周期方法可能不是同步的，而且可能多次执行，所以里面最好是纯函数（不依赖外部环境，全局变量等，仅根据函数输入参数来得到结果，多次调用时结果一致），确保多次执行结果都相同，...原创 2019-01-19 17:26:28 · 203 阅读 · 0 评论 -
2.官方脚手架目录介绍
1.node_modules 项目依赖包2.public 公用的 index.html favicon.ico manifest.json (pwa技术相关 可以指定哪些文件可以被缓存)<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta nam原创 2019-01-19 17:28:00 · 274 阅读 · 0 评论 -
3.react组件todolist实例
import React, { Component, Fragment } from 'react';// import style from './style.css' // import React from 'react'// const Component = React.Component class Todolist extends Component {c...原创 2019-01-19 17:29:18 · 441 阅读 · 0 评论 -
4.组建的拆分和通信，ES6代码规范写法
父组件import React, { Component, Fragment } from 'react';import TodoItem from './todoitem';// import React from 'react'// const Component = React.Component// import style from './style.css' ...原创 2019-01-19 17:32:25 · 197 阅读 · 0 评论 -
5.react编程思维
1.声明式开发，通过数据指定部分渲染，不是传统的模板引擎渲染需要整个模板渲染加载，虚拟DOM 减少直接操作DOM的性能开销，提供页面渲染效率2.可以和其他框架并存只控制id ="root" dom3.组建化开发4.单向数据流，父组件可以向子组件传递数据，但是数据是只读，子组件不能修改，只能使用，这样方便开发排错，如果子组件需要修改父组件的数据可以，可以由父组件将方法当作属性传递给子...原创 2019-01-19 17:33:18 · 224 阅读 · 0 评论 -
7.PropTypes和DefaultProps
1.对父组件传入的属性进行类型校验import PropTypes from 'prop-types'//组建外面TodoItem.propTypes = {//父组件必须传入test:PropTypes.string.isRequired,content : PropTypes.string.isRequired,index: PropTypes.number.isR...原创 2019-01-19 17:35:31 · 163 阅读 · 0 评论 -
8.Props,state,render调用周期
import React from 'react' class Test extends React.Component {// constructor(props) {// super(props)// }//父组件的render 运行一次 子组件也会重新render 一次//props变化导致子组件render运行一次//当组建的state,props改变...原创 2019-01-20 10:06:23 · 142 阅读 · 0 评论 -
9.虚拟DOM与DIFF算法
1.state 数据2.JS模板3.数据+模板生成虚拟DOM(一个描述DOM树结构的JS对象) document文档对象4.根据虚拟DOM的结构生成真实的DOM 渲染5.state变化6.数据+模板生成新的虚拟DOM7新的虚拟DOM和旧的虚拟DOM进行DIFF算法，找出区别8.根据区别重新区别再来改变真实DOM JSX ==> createEleme...原创 2019-01-21 09:20:44 · 304 阅读 · 2 评论 -
10.react中ref用法
react 获取真实dom节点的方法 一般不推荐用 只有在实现复杂的业务时 或者动画效果时1.e.target2.ref 的两种写法handleOnChange(e) {// console.log("事件目标对象", e.target.value)// console.log("todolist组建对象",this)// this.setState({// input...原创 2019-01-21 09:21:06 · 509 阅读 · 1 评论 -
11.react组件生命周期函数
生命周期函数：组建在某一个时期会自动被框架调用的函数component 对其他生命周期函数做了实现 唯独没有render()函数 性能优化 shouldComponentUpdate请求放在componentWillMount componentDidMount 里面设置和清除定时器分别在 componentDidMount componentWillUnmountcomp...原创 2019-01-21 09:21:23 · 302 阅读 · 1 评论 -
两个标签云动画效果小demo
两个动态标签云效果demo1demo2效果预览地址https://liaocan.top/dynamic-tags-cloud/demo1/https://liaocan.top/dynamic-tags-cloud/demo2/项目传送门https://github.com/nqmysb/dynamic-tags-cloud...原创 2019-04-25 19:52:06 · 1387 阅读 · 0 评论