Loading...
2k 字 2 分钟

# react 简易折叠面板实现 # 前言： ​ 折叠面板应该是日常开发中用的很多的一个效果，之前也没太接触过，看了下 antd 的折叠面板，但是感觉面板 header 部分可能有些简洁，如果想在头部多加一些东西的话，可能有些麻烦，于是乎就决定自己搞一个。 ​ 为了更加灵活的控制面板是否折叠，只考虑实现一个面板组件，其折叠状态的方法通过 props 进行传递。 # 思路： ​ 每个面板折叠、展开的动画效果其实就是去控制 collapse-panel 的 height 变化，并通过 transform 展示动画，所以在一开始就需要记录下每个面板的原始高度，否则在折叠面板后，高度就变为 0...
3.8k 字 3 分钟

# create-react-app 配置 less 我们一般都是通过 create-react-app 命令来创建的 react 项目，但是这种方式创建默认是对 sass 的配置，是没有 less 的配置的，所以我们就需要自己配置一下。 不暴露的方式 customize-cra 和 craco 都尝试了，但是可能是因为当前版本过高，均无法正确配置。 错误：https://github.com/arackaf/customize-cra/issues/315 最后还是采用 eject 的办法 首先暴露 webpack npm run eject然后安装 less ,...
9.1k 字 8 分钟

# React Hooks # Hooks 简介 ​ Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。具体而言，分为以下 Hook 基础 Hook useState useEffect useContext 额外的 Hook useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue # 基础 Hook # useState const [state, setState] =...
51k 字 47 分钟

# TypeScript 学习笔记 # 什么是 TypeScript? TypeScript 简称 TS TS 和 typescript 之间的关系其实就是 Less/Sass 和 CSS 之间的关系 就像 Less/Sass 是对 CSS 进行扩展一样，TS 也是对 typescript 进行扩展 就像 Less/Sass 最终会转换成 CSS 一样，我们编写好的 TS 代码最终也会换成 typescript TypeScript 是 JavaScript 的超集，因为它扩展了 JavaScript，有 JavaScript 没有的东西。 # 为什么需要...
6.3k 字 6 分钟

# 简历制作模块 回顾一下现在的文件结构，在上一节时，我们将常用的组件进行抽离封装，对类型进行了约束，添加了 templates 模版文件夹，用于存放所有模版，新增 resumeModel 定义用户简历信息的数据字段。 万事俱备，接下来正式进入到简历制作环节，话不多说，让我们动手实践吧～ # 简历入口实现 我们将简历制作的页面拆分为三大块，分别为 头部操作区 、 简历内容展示区 、 工具条操作区 ，如下图 我们按照这种分层进行代码编写，在 renderer/container/resume 文件夹下新增三个文件夹，每个文件夹都追加一个入口文件 index.tsx 和 index.less...
6.7k 字 6 分钟

# 5. 如何进行数据存储和组件间通信 上一节，我们已将首页开发完毕，接下来将要进入简历制作，但在简历制作之前，我们先将数据存储模块加以实现。让我们思考篇一个问题点： 简历平台最重要的是什么：数据！重启应用，你是否期望应用能恢复你上次的数据信息？ # 实时性数据存储 我们通过 redux 进行数据状态管理，为了避免繁琐的操作，采用 rc-redux-model 进行辅助开发。 # 1. 安装 让我们先来安装一下 npm install reduxnpm install rc-redux-model --save-dev // 👉 安装这个库，简便 redux 操作npm install...
5.7k 字 5 分钟

# 前言 在上一章节，我们已将数据存储的功能实现 在简历制作之前，我想还是有必要单独写篇文章讲解一下常用组件的封装设计与数据字段设计，大家可能喜欢如上几章节的写作思路：先 “粗暴编写” 再 “思考优化”，但在此章节中，我们需要稍微改变一下思考的方式，不要担心，先往下看。 # 组件化思想 必须承认一点是：人的精力与能力是有限的，你是很难一次性处理好一大堆复杂问题的。但我们与生具备的一优秀特点，那就是拆解问题。如同写代码一样，我们将所有的处理逻辑均放在一个组件中，那么后续的维护、管理及扩展将会变得困难，我们要学会去 “拆” 逻辑、“拆” 组件。 React...
13k 字 12 分钟

# 为什么要了解 AST 如果你想了解 js 编译执行的原理，那么你就得了解 AST，目前前端常用的一些插件或者工具，比如说 javascript 转译、代码压缩、css 预处理器、elint、pretiier 等功能的实现，都是建立在 AST 的基础之上。 在线解析 ast 的网站:https://astexplorer.net/ # JavaScript 编译执行流程 js 执行的第一步是读取 js 文件中的字符流，然后通过词法分析生成 token，之后再通过语法分析生成 AST（Abstract Syntax Tree），最后生成机器码执行。 #...
13k 字 12 分钟

# 为什么要了解 AST 如果你想了解 js 编译执行的原理，那么你就得了解 AST，目前前端常用的一些插件或者工具，比如说 javascript 转译、代码压缩、css 预处理器、elint、pretiier 等功能的实现，都是建立在 AST 的基础之上。 在线解析 ast 的网站:https://astexplorer.net/ # JavaScript 编译执行流程 js 执行的第一步是读取 js 文件中的字符流，然后通过词法分析生成 token，之后再通过语法分析生成 AST（Abstract Syntax Tree），最后生成机器码执行。 #...
8.6k 字 8 分钟

# 路由组件开发 我们进入到 app/renderer 文件夹下，会发现这里有搭建环境时写的 <Title /> 组件，我们将其进行删除（已无用），我们用脚趾头都能知道，之后会存在诸多模块入口，所以我们在 renderer 下，创建一个路由文件 router.tsx ，管理所有的模块入口，先来编写一下 router.tsx // renderer/router.tsximport React from 'react';import { HashRouter, Route, Switch, Redirect }...