青湛
### Search before asking - [X] I had searched in the [issues](https://github.com/apache/incubator-devlake/issues?q=is%3Aissue) and found no similar feature requirement. ### Description In my work, I need to constantly add new functions...
### ⚠️ Pre Checklist > Please complete _ALL_ items in this checklist, and remove before submitting - [ ] I have read through the [Contributing Documentation](https://devlake.apache.org/community/). - [ ] I...
> 说来我也有很久没有更新过分享了，也一直处在温水煮青蛙的状态。因为一些原因加上这个社会真的太卷了，所以我也被迫加入了内卷大军，重温了很多知识，同时确实也发现了自己很多不足，也想借此机会让大家卷起来，毕竟能力是自己。 ## 先说两句 关于我今天想写的内容，大部分你其实都可以在`React`官方文档上学习到。那为什么我还是想写？因为作为一个写了差不多有三年的`React`的人，我居然没有正儿八经的通读过官方文档，我想告诉的可能是和我类似的人吧，同时也补充一些我自己的理解和看法。 ## 问你几个问题 性能优化这个问题啊，真的是永远都逃不了，是个面试官都要问几句，不过说实话不知道是`React`做的太好了，还是我做的项目都太基础了，基本没遇到过什么性能问题，导致我在很长一段时间内根本不知道 React 还有很多跟性能优化有关的 API。 先来看个代码，我直接在一个文件里定义多个组件方便大家观看，正式编写代码的时候一个文件就是一个组件。 ```javascript import React from 'react'; class Test extends React.Component { componentDidUpdate() { console.log('Test componentDidUpdate'); } render() { return...
## 前言 这段时间公司的事情变得比较少，空下了很多时间，作为一个刚刚毕业初入职场的菜鸟级程序员，一点都不敢放松，秉持着我为人人的思想也想为开源社区做点小小的贡献，但是一直又没有什么明确的目标，最近在努力的准备吃透`react`，加上`react`的脚手架工具`create-react-app`已经很成熟了，初始化一个`react`项目根本看不到它到底是怎么给我搭建的这个开发环境，又是怎么做到的，我还是想知道知道，所以就把他拖出来溜溜。 **文中若有错误或者需要指正的地方，多多指教，共同进步。** ## 使用说明 就像我开头说的那样，学习一个新的东西，应该是先知道如何用，然后在来看他是怎么实现的。`create-react-app`到底是个什么东西，总结一句话来说，就是官方提供的快速搭建一个新的`react`项目的脚手架工具，类似于`vue`的`vue-cli`和`angular`的`angular-cli`，至于为什么不叫`react-cli`是一个值得深思的问题...哈哈哈，有趣！ 不说废话了，贴个图，直接看`create-react-app`的命令帮助。  ### 概略说明 毕竟它已经是一个很成熟的工具了，说明也很完善，重点对其中`--scripts-version`说一下，其他比较简单，大概说一下，注意有一行`Only is required`，直译一下，仅仅只有项目名称是必须的，也就是说你在用`create-react-app`命令的时候，必须在其后跟上你的项目名称，其实这里说的不准确，像`--version --info --help`这三个选项是不需要带项目名称的，具体看下面： - `create-react-app -V(or --version)`：这个选项可以单独使用，打印版本信息，每个工具基本都有吧？ - `create-react-app --info`：这个选项也可以单独使用，打印当前系统跟`react`相关的开发环境参数，也就是操作系统是什么啊，`Node`版本啊之类的，可以自己试一试。 - `create-react-app -h(or --help)`：这个肯定是可以单独使用的，不然怎么打印帮助信息，不然就没有上面的截图了。 也就是说除了上述三个参数选项是可以脱离必须参数项目名称以外来单独使用的，因为它们都跟你要初始化的`react`项目无关，然后剩下的参数就是对要初始化的`react`项目进行配置的，也就是说三个参数是可以同时出现的，来看一下它们分别的作用： - `create-react-app...
## 前言 自以为还算一个比较高产的人吧～但是感觉好久都没有写点什么没有营养的东西了，这一篇本来是打算去年年底都要拿出来说一说的，但是年底事情太多了，加上我真的变懒了拖到现在才要把这个准备了好久的标题完善一下。 之所以会突然想讲一讲`JavaScript`中的数组，是因为我经历了好多次事后发现很傻的问题，所以就想说还是总结一下，这篇相当于总结一样的文章我也不想讲数组的方法是怎么用的，毕竟不管是在哪，数组方法的使用都有很多教程了，单纯的就来说一说那些我们可能忽略的细节。 ## 抛砖引玉 在开始正式讲被我们忽略的一些数组方法之前，我还是想先举一个例子来说说我在其中躺过的一丢丢小坑～ 现在我们随便来有一个小小的需求，写一个方法，有两个参数，一个是数组，另一个是需要添加到数组里面的元素。 ```javascript function arrPush(arr, target) { return arr.push(target); } var arr_1 = [1, 2, 3]; console.log(arrPush(arr_1, 4)); ``` 上面的代码对你来说应该是很简单的吧，我们的需求就是把`[1, 2, 3]`变成`[1, 2, 3,...
## 前言 我今年二月的时候就准备筹划一整个`React`的学习系列，但是发现自己真的是不够强，理解还不够深刻，加上真的没有理想的那么多时间，所以直接简化到这几篇闲来无事系列。 本篇用`Koa` 、 `MongoDB` 和 `Redis` 搞一个以`json`通信的服务器，用于之后所有客户端的接口服务！ **[API详情](https://github.com/mintsweet/practice/wiki/API)** **[README](https://github.com/mintsweet/practice/blob/master/packages/server/README.md)** ## 系统说明 整个系统在设计下来之后，发现也不是想象的那么简单，但是也算不上复杂，大体上就是一个以发布话题为主体，围绕展开的功能。 ### 数据结构 整个数据结构分为五个大块，分别是`用户`、`话题`、`回复`、`消息`和`行为`。前三个都好说，`消息`其实也很好理解，比如一个用户关注了另一个用户，被关注的人肯定是有提醒的，主要说一下`行为`，为什么要叫行为呢？主要是用户的动作有多种，比如收藏、点赞等等，我不想为每一种行为都单独设定一个数据结构，它们的结构也完全可以类似，所以整体就叫做`行为`了。 ### 多说两句 大部分内容还是容易理解，我就说一下差不多写完以后才发现错了好多的地方，第一个就是数据层没有单独提出来，也就是操作数据库的部分还是封在了`controller`里面，但其实这样使得整个`controller`层中的代码很臃肿，后来我发现我的积分制度居然忘记加了，就开始一个文件一个文件的找每次需要增加积分的地方修改，其实如果抽离了数据层，修改起来就会简单许多。 还有一个容易错的地方，由于我把整个用户行为都封在了一个数据结构中，以`type`字段区分，但是行为与行为直接还是有些许差异的，如果处理不当，就会看起来很混乱，这也是我不想看到的情况。 ## 目录设计 目录其实完全可以按照个人喜好来规划目录，但是我还是觉得写代码嘛，越规范越好，但是我也不是说我这种目录结构就是最规范的.....只是做个参考，遵循`MVC`模式，只是这里我们的服务只负责数据，不负责视图，所以就只剩`MC`，模型和控制器。 ``` ├── sever │ ├── __test__...
## 前言 我今年二月的时候就准备筹划一整个`React`的学习系列，但是发现自己真的是不够强，理解还不够深刻，加上真的没有理想的那么多时间，所以直接简化到这几篇闲来无事系列。 本篇用`Koa` 、 `MongoDB` 和 `Redis` 搞一个以`json`通信的服务器，用于之后所有客户端的接口服务！ **[API详情](https://github.com/mintsweet/practice/wiki/API)** **[README](https://github.com/mintsweet/practice/blob/master/packages/server/README.md)** ## 系统说明 整个系统在设计下来之后，发现也不是想象的那么简单，但是也算不上复杂，大体上就是一个以发布话题为主体，围绕展开的功能。 ### 数据结构 整个数据结构分为五个大块，分别是`用户`、`话题`、`回复`、`消息`和`行为`。前三个都好说，`消息`其实也很好理解，比如一个用户关注了另一个用户，被关注的人肯定是有提醒的，主要说一下`行为`，为什么要叫行为呢？主要是用户的动作有多种，比如收藏、点赞等等，我不想为每一种行为都单独设定一个数据结构，它们的结构也完全可以类似，所以整体就叫做`行为`了。 ### 多说两句 大部分内容还是容易理解，我就说一下差不多写完以后才发现错了好多的地方，第一个就是数据层没有单独提出来，也就是操作数据库的部分还是封在了`controller`里面，但其实这样使得整个`controller`层中的代码很臃肿，后来我发现我的积分制度居然忘记加了，就开始一个文件一个文件的找每次需要增加积分的地方修改，其实如果抽离了数据层，修改起来就会简单许多。 还有一个容易错的地方，由于我把整个用户行为都封在了一个数据结构中，以`type`字段区分，但是行为与行为直接还是有些许差异的，如果处理不当，就会看起来很混乱，这也是我不想看到的情况。 ## 目录设计 目录其实完全可以按照个人喜好来规划目录，但是我还是觉得写代码嘛，越规范越好，但是我也不是说我这种目录结构就是最规范的.....只是做个参考，遵循`MVC`模式，只是这里我们的服务只负责数据，不负责视图，所以就只剩`MC`，模型和控制器。 ``` ├── sever │ ├── __test__...
## What and why to refactor Upgrade react-router-dom to 6. ## Describe the solution you'd like Upgrade react-router-dom to 6. ## Related issues Nope. ## Additional context Nope.
### Search before asking - [X] I had searched in the [issues](https://github.com/apache/incubator-devlake/issues?q=is%3Aissue) and found no similar issues. ### What happened The api parameters of refdiff are not displayed clearly. ...
> 这是一次突发奇想的感悟，感觉还挺神奇的，遂记录一下。 ## 前言 作为一个`React`的开发者已经蛮久的了，大大小小的应用也开发了不少，除了一开始学习`React`时用过`Redux`以外，后来基本都不碰了，不管多么复杂的应用，我也简单的觉得使用`Context`就能够解决我所有的问题。说来惭愧，我基本没有思考过`Redux`存在的原因，可能是`React`真的做的太好了，又或者是我们现在的设备性能已经严重过剩了，让我完全不需要考虑应用优化的问题。 今天又冒出为什么这么多人用`Redux`的问题，所以又看了一下`React`和`Redux`的文档，结果有蛮大的收获（每次看文档都有新收获，推荐大家没事多看看），突然让我回忆起曾经好多次使用`useState`更新数组时的别扭（虽然没什么问题，但是总觉得过于复杂了），今天我们就来聊聊这些。 随便推荐使用我写的理解例子[examples/reducer-context-redux](https://github.com/mintsweet/mintsweet.github.io/tree/master/examples/reducer-context-redux)一起服用效果更佳哦，以下所有完整代码皆可在例子中找到。 ## 需求 脱离真实需求聊一些技术的东西，总让人觉得比较虚，所以我们今天就来聊一下一个比较简单的需求，比较几种不同的方式演变的代码的区别来帮助我们理解`Redcuer`、`Context`和`Redux`这些概念。 简单的描述一下需求，一个可以创建`todo`的输入框，一个展示`todo`的列表，`todo`本身可以修改名称，标记为完成或者删除，具体看下图。  ## 一般实现 从图片也可以看出来这是一个非常简单的需求，让我们来快速的实现一下，完整代码见[examples/reducer-conetxt-redux/base](https://github.com/mintsweet/mintsweet.github.io/tree/master/examples/reducer-context-redux/src/1-base) ```jsx ... // 定义一个 Todos const [todos, setTodos] = useState([]); // 定义几个方法分别用来 创建，更新，删除 Todo...