react
池存祥
点点滴滴,都是自我的积累
github.com/ccx1
展开
-
BrowserRouter配置basename之后白屏的问题解决方案
今天遇到个奇怪的问题,别人连我的webpack-server是可以看到页面,而我本地是看不到的查了好久,发现BrowserRouter配置basename出现了白屏,但是看教程都是这样的。最后发现,再package.json里面加入一行就可以了。...原创 2020-07-16 13:58:41 · 2223 阅读 · 0 评论 -
React-设置cookie
react设置cookie,持久化保存数据,一般来说,我们使用redux来保存当前数据即可,但是有一种情况,需要保存信息,那就是登陆的时候,我们需要存储,token,来保持永久化登陆将其抽取到了common中,通过document.cookie,来获取页面的cookieexport default { // 获取cookie getCookie(key) { ...原创 2019-02-14 12:03:22 · 13137 阅读 · 0 评论 -
React-vendor过大进行切割工程
在日常开发中,webpack框架打包的时候,vendor打包出来居然有3.3mb.势必会导致加载过程中的缓慢,如果是异步加载,则会加载更加迅速.那么如何实现vendor的切割呢我们需要利用到webpack中的optimization属性原先是vendor,chunks为all.将所有打包进来,不进行分割 splitChunks: { chun...原创 2019-02-19 11:10:38 · 1790 阅读 · 0 评论 -
React-关于withRouter
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入.无需一级级传递react-router 的属性,当需要用的router 属性的时候,将组件包一层withRouter,就可以拿到需要的路由信息.如果是route直接的component的对象...原创 2019-02-14 16:21:26 · 1460 阅读 · 0 评论 -
React-请求网络的两种方式
方式一:原生请求,react自带的fetch请求方式 fetch(opt.url, { method: opt.type, body: data, headers: { 'content-type'...原创 2019-01-14 19:23:49 · 7299 阅读 · 0 评论 -
React--webkit-line-clamp、-webkit-box-orient打包之后不起作用
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法样式为.. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;结果打包之...原创 2018-12-26 09:54:28 · 1690 阅读 · 0 评论 -
(转)React 生命周期
前言学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助.Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁初始化1、getDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语...转载 2018-12-19 10:14:46 · 106 阅读 · 0 评论 -
React-快速构建webpack
第一步,在目录建个文件夹我们可以通过命令行,创建文件夹,比如我创建为testmkdir test然后进去该文件夹cd test第二步,创建package.json配置文件输入命令行 npm init这里面主要是创建package.json主要信息就是作者,项目名之类的,可以一路回车直接创建,也可以填写第三步,安装webpack依赖npm inst...原创 2018-12-18 10:07:30 · 135 阅读 · 0 评论 -
React-仿微信通讯录控件
起因:产品给了一个需求,要求写一个跟微信朋友圈一样,取首字母产生的通讯录标签页,因为很多人要求源码给上现在贴上源码源码地址写了一遍,发现意外的好写最终效果数据采用了随机字符串的方法,并且使用数组方法排序, // 去除数字key let regExp = new RegExp(/^[0-9]$/); let data = []...原创 2018-12-17 14:37:18 · 2150 阅读 · 14 评论 -
React-工作遭遇-webpack.config.js流程解析
原先写项目的时候,写了一年多的react.后来发现.其实自己搭建一个也是很简单的,如何开始,得先从webpack.config.js开始讲起// 导入webpackvar webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const path = require(...原创 2018-09-21 15:10:05 · 1343 阅读 · 0 评论