- 博客(231)
- 收藏
- 关注
RSS订阅
原创 圣杯布局和双飞翼布局
三栏布局圣杯布局和双飞翼布局是经典的三栏布局方案圣杯布局圣杯布局通过 margin负值 和 相对定位 实现的思路：（1）在一个大的盒子设置 padding-left 和 padding-right 值（这三个盒子是兄弟关系）。（2）两个盒子填充这个大盒子的左右两边空白处。（3）左边那个盒子通过设置 margin-left: -100% 移动到大盒子内部左边，再通过相对定位向左移动一个小盒子的宽度。（4）右边的那个小盒子设置 margin-right: - 小盒子宽度 ，使小盒子填充大盒子右
2022-01-08 11:23:25
784
1
原创 JavaScript 内存泄漏
js 内存泄漏什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。char * buffer;buffer = (char*) malloc(42);// Do somet
2021-12-28 14:09:54
7568
3
原创 JS（v8）垃圾回收机制
GC是什么GC 即 Garbage Collection ，程序工作过程中会产生很多 垃圾，这些垃圾是程序不用的内存或者是之前用过了，以后不会再用的内存空间，而 GC 就是负责回收垃圾的，它工作在引擎内部，对于我们前端来说，GC 过程是相对比较无感的。不是所有语言都有 GC，一般的高级语言里面会自带 GC，比如 Java、Python、JavaScript 等，也有无 GC 的语言，比如 C、C++ 等，那这种就需要我们程序员手动管理内存了，相对比较麻烦。JavaScript 自动垃圾收集机制编
2021-11-23 13:32:33
2727
原创 react hooks 中的 useEffect, useCallback, useMemo
useEffectuseEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等有了useEffect，我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情 (具有 componentDidMount，componentDidUpdate 和 componentWillUnmount 的功能)// 基本用法useEffect(() => { console.log('这是一个不含依赖数组的useEf
2022-05-07 17:44:51
1076
原创 react native 中设置Image/ImageBackground圆角无效的解决方法
通常我们会设置style：borderRadius：在安卓环境下，发现并没有生效，设置属性即可解决imageStyle={undefined{ borderRadius:20 }}完整示例：<Image style={{width:40,height:40,borderRadius:20}} imageStyle={{borderRadius:20}} /> <ImageBackground style={{width:40,height:40,borderRadius:
2022-03-04 09:52:33
1744
原创 TypeScript 中的问号+冒号、双问号、问号+点、感叹号+点
?:?: 是指可选参数，可以理解为参数自动加上undefinedfunction fun(x: number, y?: number) { // 可选参数 return x + (y || 0);}fun(1); // 1fun(1, null); // error, 'null' is not assignable to 'number | undefined'interface IPro { id: string | number; page: number; key?:
2022-03-01 18:44:29
10503
5
原创 react native 创建、运行项目
创建项目npx react-native init rn_demo检测与手机连接adb devices运行项目npx react-native run-android
2022-02-24 12:15:27
952
原创 taro 安装、运行【h5、小程序】
taro安装 taro/clinpm i -g @tarojs运行在 h5yarn dev:h5运行在小程序yarn dev:weapp 之后生成一个 dist 打包文件，导入小程序开发工具即可运行
2022-02-22 11:31:56
2008
原创 文件系统：NTFS、FAT32和exFAT
一、简介1、NTFSNTFS文件系统是windows NT核心和高级服务器网络操作系统环境的文件系统。NTFS系统比FAT32的可靠性更高，可以支持更大的分区和更大的文件，此外还有不少FAT32没有的功能，比如压缩分区、文件索引、数据保护和恢复、加密访问等。2、FAT32FAT32文件系统是用4个字节（32位）空间来表示每个扇区配置文件的情形，所以叫FAT32。分区容量最低是512M，而上限的话不同的操作系统都不一样，WinXP系统最大可以做到2TB的FAT32分区。3、exFATexFAT文件
2021-12-10 09:08:49
4491
原创 redux 的使用
1. 安装 reduxnpm i redux2. 创建一个 Action在根目录下 (src) 创建一个文件夹action在该目录下创建一个index.js 文件，用来构建Actionconst sendAction = () => { ... };在 action 创建函数里面利用 return，返回一个 action 对象，注意需要携带 type 属性const sendAction = () => { return {type: "send action", v
2021-12-09 15:59:52
561
原创 Redux
ReduxRedux 是一个用于 JavaScript 状态容器，提供可与预测化的状态管理。Redux 可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用)，并且易于测试Redux 除了和 React 一起使用外，还支持其它界面库，而且它体小精悍(只有2kB)随着 JavaScript 单页面发开日趋复杂，JavaScript 需要管理更多的state(状态)，这些 state 可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据，也包括UI状态等管理不断变化的
2021-12-09 10:11:20
472
原创 CSS IN JS —— CSS Moudules
CSS MoudulesCSS Modules 通过对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题换句话说：所有类名都具有 “局部作用域” ，只在当前组件内部生效实现方式：webpack 的 css-loader 插件命名采用：BEM （Block块、Element元素、Modifier三部分组成）命名规范，比如：.list__item_active在 React 脚手架中演化成：文件名、类名、hash(随机）三部分，只需要指定 类名 即可CSS Modules
2021-12-07 16:24:50
963
原创 H5 使用地理位置定位
作用︰在Web应用程序中获取地理位置（文档)说明∶地理位置API 通过 navigator.geolocation 对象提供，通过 getCurrentPosition 方法获取
2021-12-04 15:50:30
787
原创 组件库 antd-mobile 的使用
组件库 antd-mobile打开 antd-mobile 的 文档安装：yarn add antd-mobile在 App.js 根组件中导入要使用的组件渲染组件在 index.js 中导入组件库样式
2021-12-03 17:18:52
1568
原创 react 路由
react 路由现代的前端应用大多都是 SPA(单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能:让用户从一个视图（页面）导航到另一个视图(页面)前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系使用React路由简单来说，就是配置 路径 和 组件（配对)使用步骤安装：yarn add react-router-dom导
2021-12-03 11:17:44
162
原创 react 中 虚拟DOM 和 Diff算法
虚拟DOM 和 Diff算法React更新视图的思想是：只要state变化就重新渲染视图特点：思路非常清晰问题：组件中只有一个DOM元素需要更新时，也得把整个组件的内容重新渲染到页面中? 不是理想状态：部分更新，只更新变化的地方。问题：React 是如何做到部分更新的? 虚拟DOM配合Diff 算法虚拟DOM∶本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容( UI)。执行过程初次渲染时，React会根据初始state ( Model )，创建一个 虚拟DOM对象（树)
2021-12-02 10:55:24
448
原创 react 组件性能优化
react 组件性能优化减轻state减轻state：只存储跟组件渲染相关的数据(比如: count/列表数据/ loading等)注意:不用做渲染的数据不要放在 state 中，比如定时器id等对于这种需要在多个方法中用到的数据，应该放在 this 中避免不必要的重新渲染组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰问题：子组件没有任何变化时也会重新渲染如何避免不必要的重新渲染呢?解决方式：使用 钩子函数shouldComponentUpdate(nextPro
2021-12-01 20:58:03
742
原创 react 中组件更新机制
react 中组件更新机制setState() 的两个作用：1.修改state 2.更新组件（UI)过程∶父组件重新渲染时，也会重新渲染子组件。但只会渲染 当前组件子树（当前组件及其所有子组件)
2021-12-01 16:16:23
445
原创 react 中 JSX 语法的转化过程
JSX 语法的转化过程JSX 仅仅是 createElement() 方法的语法糖（简化语法)JSX 语法被 @babel/preset-react插件 编译为 createElement() 方法React元素∶是一个对象，用来描述你希望在屏幕上看到的内容import React from "react";import ReactDOM from "react-dom";/* JSX 语法转化过程*/// const element = <h1 className=
2021-12-01 16:08:00
586
原创 react 中的 setState()
setState()setState() 是异步更新数据的注意：使用该语法时，后面的 setState() 不要依赖于前面的 setstate()可以多次调用setState() ，只会触发一次重新渲染this.state = { count: 1 }this.set state ({ count: this.state.count + 1})console. log(this.state.count) // 1推荐语法推荐：使用 setState((state, props
2021-12-01 15:28:09
166
原创 react 高阶组件
react 高阶组件概述目的：实现状态逻辑复用采用 包装（装饰）模式，比如说：手机壳手机：获取保护功能手机壳：提供保护功能高阶组件就相当于手机壳，通过包装组件，增强组件功能思路分析高阶组件 (HOC , Higher-Order Component )是一个函数，接收要包装的组件，返回增强后的组件高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件 WrappedComponent使用步骤创建一个函数，名称约定以w
2021-12-01 14:40:05
752
1
原创 react 中 render-props 模式
React组件复用概述思考：如果两个组件中的部分功能相似或相同，该如何处理?处理方式：复用相似的功能（联想函数封装)复用什么? 1. state 2. 操作state的方法（组件状态逻辑)两种方式：1. render props 模式 2. 高阶组件(HOC)注意:这两种方式不是新的APl，而是利用React自身特点的编码技巧，演化而成的固定模式(写法)render props 模式思路：将要复用的state和操作state的方法封装到一个组件中问题1：如何拿到该组件中复用的s
2021-12-01 10:12:35
529
原创 react 组件的生命周期
react 组件的生命周期意义︰组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等组件的生命周期 ︰组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。钩子函数的作用︰为开发人员在不同阶段操作组件提供了时机。只有 类组件 才有生命周期。生命周期的三个阶段每个阶段的执行时机每个阶段钩子函数的执行顺序每个阶段钩子函数的作用import React from "react"
2021-11-30 15:20:57
229
原创 react 中 props 校验
props1. children 属性children 属性∶表示组件标签的子节点。当组件标签有子节点时，props 就会有该属性children属性与普通的props一样，值可以是任意值(文本、React元素、组件，甚至是函数)children 使用方法示例：import React from "react";import ReactDOM from "react-dom";import './index.css'// children 属性const App = prop
2021-11-29 16:14:18
306
原创 react 中的 Context
思考：App 组件要传递数据给 Child 组件，该如何处理?处理方式:使用props一层层组件往下传递（繁琐)Context 作用：跨组件传递数据（比如：主题、语言等)使用步骤∶调用 React. createContext() 创建 Provider (提供数据） 和 Consumer(消费数据） 两个组件使用 Provider组件 作为父节点...
2021-11-29 14:36:45
348
原创 react 组件通讯的三种方式
父组件传递数据给子组件父组件提供要传递的 state 数据给子组件标签添加属性，值为 state 中的数据子组件中通过 props 接收父组件中传递的数据class Parent extends React.Component { state = { lastName: '王' } render() { return( <div style={{background:'red', padding:'20px'
2021-11-26 17:30:31
121
原创 react 组件中的 props
组件的props组件是封闭的，要接收外部数据应该通过 props 来实现props 的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据︰函数组件通过 参数props接收数据，类组件通过 this.props 接收数据函数组件传值方式// propsconst Hello = (props) => { // props 是一个对象 const { name, age } = props return( <div>
2021-11-26 14:41:31
1033
原创 react 表单 demo 代码练习
敲个demo：state、事件、表单的综合运用事件的复用封装对象属性的灵活取值 [属性（变量）]解构赋值的使用扩展运算符的使用import React from "react";import ReactDOM from "react-dom";import './index.css'// 抽离组件到独立的 JS 文件中class App extends React.Component { state = { comments: [
2021-11-26 11:01:17
649
原创 react 表单处理
受控组件HTML中的表单元素是可输入的，也就是有自己的可变状态而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改React将state 与表单元素值value绑定到一起，由state的值来控制表单元素的值步骤:在state中添加一个状态，作为表单元素的value值(控制表单元素值的来源)给表单元素绑定 change 事件，将表单元素的值设置为 state 的值（控制表单元素值的变化)输入框举例：class App extends React
2021-11-24 21:56:09
336
原创 react 中 state 的基本使用
有状态组件和无状态组件函数组件又叫做 无状态组件，类组件又叫做 有状态组件状态( state )即 数据函数组件没有自己的状态，只负责数据展示(静)类组件有自己的状态，负责更新Ul，让页面“动”起来比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。state的基本使用状态( state )即数据，是组件内部的私有数据，只能在组件内部使用state的值是
2021-11-24 17:46:06
3328
原创 react 的事件绑定和事件对象
事件绑定React 事件绑定语法与 DOM 事件语法相似语法：on+事件名称={事件处理程序}，比如：onClick={0 => {}}注意：React事件采用 驼峰命名法 ，比如：onMouseEnter、onFocus类组件class App extends React.Component { handleClick() { console.log('单击事件触发啦~') } render() { return(
2021-11-24 15:24:48
600
原创 React 组件的两种创建方式
使用函数创建组件函数组件∶使用 JS 的函数（或箭头函数)创建的组件函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容组件名称必须以大写字母开头，React 据此区分组件和普通的 React 元素使用 函数名 作为组件标签名function Hello() { return ( <div>这是我的第一个函数组件</div> )}// 使用箭头函数创建组件// const Hello = () => <d
2021-11-23 21:06:25
459
原创 JSX的基本使用
JSX的基本使用JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML ( HTML）格式的代码优势：声明式语法更加直观、与 HTML 结构相同，降低了学习成本、提升开发效率使用步骤使用 JSX 语法创建 react 元素const title = <h1> hello JSX </h1>使用 ReactDom.render() 方法渲染 react 元素到页面中ReactDom.render(title, root
2021-11-23 14:52:09
386
原创 react.js的使用
建 index.html 文件命令行 npm init 生成 packge.json 文件命令行 npm i react react-dom引入react、react-dom，创建 react 元素， 渲染 react 元素<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi.
2021-11-23 11:11:43
458
原创 react脚手架配置代理
react脚手架配置代理方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则：const p
2021-10-27 19:50:28
78
原创 虚拟DOM（vue、react）中key的作用
虚拟DOM中key的作用:（1) 简单的说: key 是虚拟 DOM 对象的标识，在更新显示时key起着极其重要的作用。（2) 详细的说:当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟DON】 ,随后React进行【新虚拟 DOM 】与【旧虚拟 DOM 】的 diff 比较，比较规则如下： a.旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key: (1).若虚拟 DOM 中内容没变，直接使用之前的真实 DOM (2).若虚拟 DOM 中内容变了，则生成新的真实..
2021-10-25 14:39:25
410
原创 react脚手架中index.html的内容注释
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <!-- 开启理想视口，用于做移动端网页的适配 --> <meta na
2021-10-25 14:33:08
568
原创 vue2 和 vue3 的区别
2020年9月发布的正式版Vue3 支持大多数的 Vue2 的特性Vue 中设计了一套强大的 组合 API 代替了 Vue2 中的option API，复用性更强了更好的支持TS最主要：vue3 中使用了 Proxy 配合 Reflect 代替了 vue2 中 object.defineProperty() 方法实现数据的响应式(数据代理)重写了 虚拟DOM，速度更快了新的组件：Fragment(片段) / Teleport(瞬移) / Suspense(不确定)设计了一个新的脚手架工具——.
2021-10-13 09:16:43
121
原创 vue-router原理
hash路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
2021-09-30 16:56:16
102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人