- 博客(19)
- 收藏
- 关注
RSS订阅原创 使用react-router-config配置路由
安装react-router-configyarn add react-router-configApp.jsimport { renderRoutes } from 'react-router-config';import { HashRouter } from 'react-router-dom';//routes 是路由配置文件import routes from "./router";...//renderRoutes需要Router包裹<HashRouter>
2021-01-02 05:18:08
1521
原创 使用craco修改react项目
安装cracoyarn add @craco/craco替换package.json ... "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" }, ...可以额外配置在根目录创建craco.config.js文件const path = require("path")c
2021-01-02 05:13:30
914
原创 vue v-model的使用和原理
v-model的实际操作<input type="text" :value="message" v-on:input="valueChange"><script>...methods: { valueChange(event){ this.message = event.target.value }}</script>v-model => 语法糖 是绑定更改值属性结合v-model:radio<!-- radio -->
2021-01-01 08:20:13
195
原创 React测试框架
通用测试工具: JEST 测试框架React测试工具: 自带ReactTestUtils => React Testing Library(推荐/默认)Common MatcherTruthinessNumbersStringsArrays and iterable测试文件.js 结尾 tests.test.js.spec.jsimport React from 'react'import {render} from '@testing-library/react'impor
2020-12-31 14:34:43
230
原创 React UI组件开发心得
//获得button所有属性type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributestype AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes//partial<> 可选化export type ButtonProps = Partial<NativeButtonProps & AnchorButt
2020-12-31 06:34:09
182
原创 Http
Http 面试题目http常见状态码?http常见header有哪些什么是Restful API描述http缓存机制http状态码状态码分类:1xx服务器收到请求2xx请求成功 2003xx重定向 3024xx 客户端错误 404 (客户端请求不存在的地址)5xx 服务器错误 500常见状态码:200成功,301 永久重定向(浏览器自动处理,以后直接访问转的地址),302 临时重定向(浏览器自动处理.仍然访问)304 资源未被修改(请求过,用缓存就可以)404 资
2020-12-30 08:11:36
935
原创 React的 setState
setState 和 batchUpdate有时异步(普通使用),有时同步(Dom事件,setTimeout)有时合并(对象形式), 有时不合并(函数形式)后者比如Object.assign有时异步(普通使用),有时同步(Dom事件,setTimeout)自己定义的DOM事件核心要点setState 主流程batchUpdate机制transaction(事物)机制setState主流程this.setState(newState) => newState存入pend
2020-12-28 04:57:07
142
原创 React的合成事件
合成事件所有事件挂载到document上event 不是原生的, 是 SyntheticEvent 合成事件对象和Vue事件不同,和DOM事件也不同event.preventDefault() => 阻止默认行为event.stopPropagation() => 阻止冒泡原生事件在 event.nativeEventDOM: div =(事件冒泡到顶层)=> document =>合成事件层(实例化完成统一的react event):Synthetic Eve
2020-12-28 04:34:59
341
原创 JSX的本质
JSX 等同于 Vue 模板(Vue模板不是html, JSX也不是JS)React.createElement(‘tag’, null, [child1, child2, child3]/也可以打散传入(不通过数组))JSX本质React.createElement() 即h函数, 返回vnode第一个参数,可能是组件,也可能是html tag组件名,首字母必须大写(React 规定)第一个参数是List组件 => 找到List 组件jsx结构,继续拆分...
2020-12-28 04:19:23
238
原创 Redux使用
Redux 和 Vuex 作用相同, 但比Vuex学习成本高Redux 使用基本概念单项数据流react-redux异步action中间件基本概念store state单项数据流dispatch(action)reducer -> newStatesubscribe 触发通知react-redux connectconnectmapStateToProps / mapDispatchToProps异步actionreturn 函数 包裹dispatch
2020-12-27 14:37:04
56
原创 React高阶组件
mixin, 已被React 弃用高阶组件 HOCRender Props高阶组件不是一种功能,而是一种模式接收组件, 返回组件逻辑封装到公共组件const HOCFactory = (Component) => { class HOC extends React.Component { //在此定义多个组件的公共逻辑 render(){ //返回拼装的结果 return <Component {...this.props}> } } return
2020-12-27 05:45:15
172
原创 React 性能优化
性能优化对React更加重要shouldComponentUpdate(简称SCU)基本用法shouldComponentUpdate(nextProps, nextState){ if(nextState.count !== this.state.count){ return true // 可以渲染 } return false // 不重复渲染}SCU默认返回true(React 默认: 父组件更新,子组件无条件更新)SCU一定要使用吗?需要的时候才优化为什么
2020-12-27 05:13:06
195
原创 React基础复习
ReactJSX基本使用变量, 表达式Class style子元素与组件判断列表渲染事件表单组件使用setStatesetState 是同步还是异步setState 合并组件生命周期React高级特性函数组件非受控组件 ?Portals ?context ?异步组件性能优化如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图
2020-12-26 15:05:03
97
原创 学习笔记: AOP面向切面编程理解
AOP => Aspect Oriented Programming 面向切面编程通过预编译方式和运行期代理实现程序功能同一维护的技术,AOP是OOP的延续采用横向抽取,取代传统纵向继承体系可以进项性能监视,事务管理,安全检查,缓存的操作DAO=> data access object数据访操作如果想对功能进行检查扩展public class UserDAOImpl ...
2020-01-12 11:24:43
118
原创 数据库连接池
连接池创建和管理一个连接的缓冲池技术,这些链接准备好被任何需要他们的线程使用传统程序直接获得连接的缺点每一次请求都要向数据库获得连接,浪费服务器资源常见连接池 =>C3P0一个常见错误缺少c3p0依赖jar包mchange-commons.jar com.mchange c3p0 0.9.5.2 com.mchange mchan...
2020-01-10 12:02:54
79
原创 防止sql注入漏洞PreparedStatement使用
防止sql注入漏洞PreparedStatement使用使用传统方法面临sql注入漏洞的风险PreparedStatement可以防止1.保存数据public class JDBCDemo5 { @Test public void demo1(){ Connection conn = null; PreparedStatement pst...
2020-01-10 11:26:52
198
原创 JDBC基础工具类的抽取
JDBC基础工具类的抽取public class Demo1 { //将常用值设置成静态常量 private static final String driverClass; private static final String url; private static final String username; private static fina...
2020-01-10 10:31:23
55
原创 基础JDBC API使用
基础JDBC API使用import com.mysql.jdbc.Driver;import org.junit.Test;import java.sql.*;public class Demo1 { @Test public void demo1() { //为了可以在代码块外进行资源释放,定义在try外部 Connection c...
2020-01-10 09:59:42
141
原创 Java WEB 学习笔记
Java WEB 学习笔记Java web 工程结构Servlet 生命周期Java的注解元注解**@Retention(注解存活时间)@Documented(将注解中的元素包含到 Javadoc 中)@Target (指定了注解运用的地方)@Inherited(如果它的子类没有被任何注解应用的话，那么这个子类就继承了超类的注解)@Repeatable(可重复的)预注解@Deprecated@Ov...
2020-01-07 06:16:59
141
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人