- 博客(22)
- 收藏
- 关注
RSS订阅原创 CSS隐藏元素滚动条
针对特定浏览器设置滚动条样式来实现Firefox浏览器对于Firefox，可以将滚动条宽度设置为none：scrollbar-width: none; /* Firefox */IE浏览器对于IE，需要使用-ms-prefix属性定义滚动条样式：-ms-overflow-style: none; /* IE 10+ */Chrome和Safari浏览器对于Chrome和Safari浏览器，必须使用CSS滚动条选择器，然后使用display：none隐藏它：::-webkit-scrol
2021-04-30 09:17:44
358
原创 给ant-design Table组件的column添加鼠标悬浮提示
给ant-design Table组件的column添加鼠标悬浮提示ant-design Table组件：<template> <a-table :columns="columns" :data-source="data"> </a-table></template><script>export default { data() { return { data:[ { key
2021-04-29 09:12:00
3904
4
原创 Create-React-App .env文件自定义配置
React项目build打包时不生成 sourceMap（.map）文件打包项目，主要的目的是为了，压缩代码，加快数据的传输，减少 http 请求，从而优化前端页面的性能。脚手架，默认情况下，打包项目的过程中，都会生成 souceMap（.map）文件。sourceMap 会增加打包以后的文件的体积，对于一些需求是轻量级的项目而言，sourceMap 有点多余。添加.env文件修改变量配置 node.js 运行时候的环境变量，传入 GENERATE_SOURCEMAP 值为 false。1.
2021-04-28 09:51:59
2495
原创 内网环境如何配置npm环境包
安装Verdaccio全局安装npm install --global verdaccio注册npm到本地npm set registry http://localhost:4873/内网添加包命令行启动Verdaccioverdaccio清理本地npm缓存目的是确保需要安装的包(.tgz)能下载到本机，避免从缓存直接安装npm cache clean --force安装需要的npm包npm i 包名查找verdaccio的storage是否有刚安装
2021-04-27 09:06:08
1825
原创 react 组件监听浏览器窗口变化
react 组件监听浏览器窗口变化react 组件实现监听浏览器窗口变化，需要在window对象中添加监听事件，事件中参数1是监听的事件，参数2为事件调用的方法。// 监听浏览器窗口变化componentDidMount() { // 在window对象中添加监听事件 window.addEventListener('resize', this.resizeWindow)}// 移除监听窗口变化的事件componentWillUnmount() { window.remove
2021-04-26 09:09:51
3553
2
原创 前端路由概述和实现原理
前端路由路由概念如何理解路由？路由器：负责分发消息后端路由（MVC）根据不同的用户请求，响应不同的内容（早期多数都是网页；现在更多的是json数据）前端路由根据不同的用户行为（事件）展示不同的页面效果（组件），组件中需要的数据可能来自于后端，也可能是前端写死的数据SPA（Single Page Application）单页面应用前端路由要解决的问题：SPA应用的局部更新问题，并且还要支持浏览器地址栏的回退功能通过前端路由实现单页面应用（局部更新）页面的变化是通
2021-04-25 09:14:36
145
原创 ES6中类的基本用法
ES6中类的基本用法构造函数的用法：function Person (uname, age) { this.uname = uname; this.age = age;}Person.prototype.showUname = function () { console.log(this.uname)}var p = new Person('lisi', 12)console.log(p)p.showUname()类的用法：class Person {
2021-04-23 09:09:08
69
原创 yarn的基本使用以及与npm的区别
yarn的基本使用语法yarn的作用与npm类似：用于管理第三方依赖包。因为npm早期有一些问题下载包的性能较差对依赖包的小版本管理有bug为了解决上述问题，又出现了一个新的工具yarnyarn不完全兼容npm常用命令yarn需要下载一个msi安装包，双击安装安装完成后可以在命令行使用yarn与npm的区别yarn与npm的区别：安装包npm install 包名yarn add 包名更新包npm update 包名yarn upgrade 包名卸载
2021-04-22 09:11:11
156
原创 react学习18-React 使用setState()更新类组件的state
setState分析修改数据是异步的// setState更新数据是异步的this.setState({ num: this.state.num + 1}, () => { // 该函数如果触发，那么就说明状态已经修改完成 console.log(this.state.num)})不要频繁调用setState// 多次频繁调用setState，内部会进行合并，只更新最后一次// 不要频繁调用setState方法this.setState({ num: thi
2021-04-21 09:07:09
1068
原创 react学习17-React高阶组件
高阶组件高阶组件 HOC（hight ordered component）withRouter就是高阶组件高阶组件的本质其实就是一个函数，该函数参数接收一个组件，返回值依然是一个组件，返回的组件一般会比参数组件多一些props属性组件代码复用的一种方式（高阶组件可以向别的组件中注入通用的props属性）// 实现一个高阶组件// 参数表示输入的组件function withRouter (InputComponent) { // 函数的返回值也是一个组件 return class
2021-04-20 09:12:31
314
原创 react学习16-React路由react-router动态路由和编程式导航
React-router动态路由路由的路径可以进行模糊匹配路由映射的path可以是模糊匹配class DynamicRouter extends React.Component { render () { return ( <Router> <h1>动态路由</h1> <hr/> {/*配置路由的链接
2021-04-19 09:11:46
788
原创 react学习15-React路由react-router的基本使用
React-router官网基本使用路由使用的基本步骤：安装依赖包# npm安装npm install react-router-dom# yarn安装yarn add react-router-dom导入路由相关组件import { BrowserRouter as Router, Route, Link } from "react-router-dom";配置路由的容器BrowserRouter（所有的路由相关配置必须包含在容器中）<BrowserRout
2021-04-16 09:20:50
194
原创 react学习14-React 虚拟DOM介绍
虚拟DOM为了提高网页的渲染性能，需要使浏览器尽可能少的更新DOMReact的底层通过一种数据结构（其实就是对象{}）描述了DOM树的信息其实每一个虚拟节点就是一个普通对象，用于描述真实的DOM元素这样会形成一个虚拟DOM树—真实的DOM树如果DOM元素对应的数据发生变化，那么虚拟DOM树会进行对比更新后的DOM树会和更新前进行对比（diff）对比的结果就是发生变化的虚拟节点集合把上述虚拟节点（普通对象）转化为真实的DOM元素把生成的真实DOM添加到页面// vnodevar ob
2021-04-15 09:12:34
154
原创 react学习13-React 组件化—children(插槽)详解
children(插槽)children的作用类似于Vue中插槽的概念。children属性名固定，它是React的核心API。class Test extends React.Component { render () { return ( <div> <div>测试Children:</div> <div>{this.props.chi
2021-04-14 09:06:50
1300
原创 react学习12-React 组件化—组件属性的延展操作
组件属性的延展操作组件标签传递属性时可以借助对象的延展操作，一次性把所有的属性添加进去import React from 'react'class Test extends React.Component { render () { return ( <div> <div>{this.props.msg}</div> <div>{this
2021-04-13 09:14:35
145
原创 react学习11-React 组件化—类表达式和点标记组件语法详解
类表达式类表达式是类的另外一种定义方式，类似于函数表达式。类表达式：let Person = class { constructor(uname, age) { this.uname = uname this.age = age }}let p = new Person ('zhangsan', 13)console.log(p)类表达式继承用法：let Student = class extends Person { constr
2021-04-12 09:07:18
225
原创 react学习10-React 表单受控和非受控组件的基本使用
React 表单受控和非受控组件的基本使用在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。受控组件渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。对于受控组件来说，输入的值始终由 React 的 state 驱动。不同的表单项数据处理（受控组件）：input、select和textarea处理方式一样将state值绑定到表单
2021-04-09 09:28:27
262
原创 react学习9-React 组件间数据传递
组件间数据传递父组件向子组件传值props 属性值是只读的子组件向父组件传值组件的函数形式的属性：父组件定义一个函数，通过子组件标签的属性将该函数传递给子组件，子组件接收到该函数后可以进行调用，调用时可以将子组件的数据通过函数实参传递给父组件非父子组件之间传值redux代码示例：class Parent extends React.Component { state = { total: 0 } handleTotal = (n) =>
2021-04-08 09:10:28
108
原创 react学习8-React 事件处理
事件处理事件绑定方式React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时需要传入一个函数作为事件处理函数，而不是一个字符串。// handle为函数名称<button onClick={this.handleClick}>点击</button>handleClick = () => { // 事件函数中的this是组件的实例对象 this.setState({ num: this.state.num + 1
2021-04-07 09:15:03
74
原创 react学习7-React 组件的生命周期
组件的生命周期官方图解React 组件的生命周期主要分为三部分：组件创建阶段组件更新阶段组件销毁阶段组件创建阶段(挂载)：constructor构造函数仅仅触发一次可以给组件的 this.state 赋值render数据(state和props)的变化会导致render重新执行render方法触发后才会更新页面每次组件更新时 render方法都会被调用。componentDidMount组件完成挂载后触发（组件模板显示到页面后）一般用于初始化组件需要的数据
2021-04-06 09:05:29
122
原创 react学习6-React 组件接收数据props和类组件状态state
组件接收数据props必须继承React.Component才可以成为一个类组件render方法的作用：产生组件的模板，属于react的核心api，名称固定必须通过this.props获取父组件传递数据，是只读的，不可以修改。class Nihao extends React.Component { render () { console.log(this.props) let uname = this.props.uname return
2021-04-02 09:22:18
387
原创 react学习5-React 组件化开发
React 组件化开发使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。组件将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思（组件接收数据，呈现内容）。组件原则：高内聚，低耦合（方便代码的重用和后期的维护扩展）。定义组件的方式定义组件两种方式：函数组件类组件函数组件：函数
2021-04-01 09:13:55
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人