上传全部文件

README.md

@@ -0,0 +1,31 @@
+
+
+<h2 align="center">👋 欢迎来到我的 GitHub</h2>
+<p align="center">
+  <a href="https://github.com/linjunc"><img src="https://img.shields.io/badge/GitHub-ff79c6" alt="github"></a>
+  <a href="https://gitee.com/Linjc66"><img src="https://img.shields.io/badge/Gitee-fe7300" alt="gitee"></a>
+  <a href="https://blog.csdn.net/m0_50855872"><img src="https://img.shields.io/badge/CSDN-cf000e" alt="csdn"></a>
+  <a href="https://juejin.cn/user/1460594842018446"><img src="https://img.shields.io/badge/juejin-brightgreen" alt="juejin"></a>
+</p>
+<p align="center"><img src="https://img.shields.io/badge/weChat-Ljc--10c-blue" alt="juejin"></p>
+<h4><p align="center">💞 前端</p></h3>
+<h4><p align="center">💖 大二 @GDUT</p></h4>
+<h4><p align="center">💟 Base: 广州</p></h4>
+
+<p align="center">
+	<a href="https://github.com/linjunc">
+		<img src="https://github-readme-stats.vercel.app/api?username=linjunc&show_icons=true&theme=radical" width="45%" alt="Savuer's github stats" data-canonical-src="https://github-readme-stats.vercel.app/api?username=linjunc&show_icons=true&theme=radical" style="max-width:100%;">
+	</a>
+	<a href="https://github.com/linjunc">
+		<img src="https://github-readme-streak-stats.herokuapp.com?user=linjunc&theme=neon-dark" width="45%" alt="linjunc's github readme streak stats" data-canonical-src="https://github-readme-streak-stats.herokuapp.com?user=linjunc&theme=neon-dark" style="max-width:100%;">
+	</a>
+</p>
+
+<br/>
+
+<h1 align="center">💖 React 入门学习</h1>
+
+
+
+<h5><p align="center"><i>If you like this series or learn something from it, please<a href="https://github.com/linjunc">★</a> this repository to show your support! 🤩</i></p></h5>
+

React 入门学习（一）-- 基础知识以及 jsx语法.md

@@ -1,6 +1,6 @@
-# React 从入门到入土（一）-- 基础知识以及 jsx语法
+# React 从入门到入土（一）-- 基础知识以及 jsx 语法
 
-![基础1](D:\桌面\web\暑假学习\React\img\基础1.png)
+![基础1](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/%E5%9F%BA%E7%A1%801.png)
 
 > 📢 大家好😪 ，我是小丞同学，最近在学习 React、小程序、阅读 JS 高程，以及整理 Node 的笔记，这是关于 React 的第一篇文章，也是我学习的第一个框架，内容如有错误，欢迎大家指正
 >

React 入门学习（七）-- 脚手架配置代理.md

@@ -0,0 +1,103 @@
+# React 入门学习（七）-- 脚手架配置代理
+
+![React - 代理](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/React%20-%20%E4%BB%A3%E7%90%86.gif)
+
+> 📢 大家好，我是小丞同学，一名<font color=#2e86de>**准大二的前端爱好者**</font>
+>
+> 📢 这篇文章是学习 React 中**脚手架配置代理**的学习笔记
+>
+> 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏
+>
+> 📢 <font color=#f368e0>**愿你忠于自己，热爱生活**</font>
+
+# 引言
+
+React 本身只关注于页面，并不包含发送 Ajax 请求的代码，所以一般都是集成第三方的包，或者自己封装的
+
+自己封装的话，比较麻烦，而且也可能考虑不全
+
+常用的有两个库，一个是JQuery，一个是 axios
+
+1. JQuery 这个比较重，因为 Ajax 服务也只是它这个库里的一小块功能，它主要做的还是 DOM 操作，而这不利于 React ，不推荐使用
+2. axios 这个就比较轻，而且采用 Promise 风格，代码的逻辑会相对清晰，**推荐使用**
+
+因此我们这里采用 axios 来发送客户端请求
+
+以前，我们在发送请求的时候，经常会遇到一个很重要的问题：跨域！
+
+![image-20210827091119837](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/image-20210827091119837.png)
+
+在我以前的学习中，基本上都需要操作后端服务器代码才能解决跨域的问题，配置请求头，利用 script，这些都需要后端服务器的配合，因此我们前端需要自己解决这个问题的话，就需要这个技术了：**代理**。
+
+在说代理之前，先谈谈为什么会出现跨域？
+
+这个应该是源于浏览器的同源策略。所谓同源（即指在同一个域）就是两个页面具有相同的协议，主机和端口号， 当一个请求 URL 的**协议、域名、端口**三者之间任意一个与当前页面 URL 不同即为跨域 。
+
+也就是说 `xxx:3000`和 `xxx:4000` 会有跨域问题，`xxx:3000` 与 `abc:3000` 有跨域问题
+
+那接下来我们采用**配置代理**的方式去解决这个问题
+
+> 关于跨域的问题解决方案，在之后的文章会有总结 ~
+
+## 1. 全局代理
+
+第一种方法，我把它叫做全局代理，因为它直接将代理配置在了配置文件 `package.json` 中
+
+```json
+"proxy":"http://localhost:5000"  
+// "proxy":"请求的地址"
+```
+
+这样配置代理时，首先会在抓原请求地址上访问，如果访问不到文件，就会转发到这里配置的地址上去请求
+
+![转发](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/%E8%BD%AC%E5%8F%91.png)
+
+我们需要做的就是在我们的请求代码中，将请求的地址改到转发的地址，即可
+
+但是这样会有一些问题，它会先向我们请求的地址，也就是这里的 `3000` 端口下请求数据，如果在 `3000` 端口中存在我们需要访问的文件，会直接返回，**不会再去转发**
+
+因此这就会出现问题，同时因为这种方式采用的是全局配置的关系，导致**只能转发到一个地址**，不能配置多个代理
+
+## 2. 单独配置
+
+这也是我自己起的名字，这种配置方式，可以给多个请求配置代理，非常不错
+
+它的工作原理和全局配置是一样的，但是写法不同
+
+**首先**我们需要在 `src` 目录下，创建代理配置文件 `setupProxy.js` 
+
+注意：这个文件只能叫这个名字，脚手架在启动的时候，会自动执行这些文件
+
+**第二步**
+
+配置具体的代理规则，我们大致讲讲这些是什么意思
+
+1. 首先我们需要引入这个 `http-proxy-middleware` 中间件，然后需要导出一个对象，这里建议使用函数，使用对象的话兼容性不大好
+
+2. 然后我们需要在 `app.use` 中配置，我们的代理规则，首先 `proxy`  接收的第一个参数是需要转发的请求，我的理解是一个标志的作用，当有这个标志的时候，预示着我们需要采用代理，例如 `/api1` ，我们就需要在我们 `axios` 的请求路径中，加上 `/api1` ，这样所有添加了 `/api1` 前缀的请求都会转发到这
+3. 第二个参数接受的是一个对象，用于配置代理。
+   - `target` 属性用于配置转发目标地址，也就是我们数据的地址
+   - `changeOrigin` 属性用于控制服务器收到的请求头中 `host` 字段，可以理解为一个伪装效果，为 `true` 时，收到的 `host` 就为请求数据的地址
+   - `pathRewrite` 属性用于去除请求前缀，因为我们通过代理请求时，需要在请求地址前添加一个标志，但是实际的地址是不存在这个标志的，所以我们**一定要去除**这个前缀，这里采用的有点类似于正则替换的方式
+
+配置一个代理的完整代码如下
+
+```js
+const proxy = require('http-proxy-middleware')
+module.exports = function(app) {
+  app.use(
+    proxy('/api1', { 
+      target: 'http://localhost:5000', //配置转发目标地址
+      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
+      pathRewrite: {'^/api1': ''} //去除请求前缀址(必须配置)
+    }),
+  )
+}
+```
+
+---
+
+关于脚手架配置代理的内容就到这里啦！
+
+> 非常感谢您的阅读，欢迎提出你的意见，有什么问题欢迎指出，谢谢！🎈
+

React 入门学习（三） -- 组件的生命周期.md

@@ -0,0 +1,167 @@
+# React 入门（三） -- 生命周期 LifeCycle
+
+![组件的生命周期](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png)
+
+> 📢 大家好，我是小丞同学，这一篇是关于 React 的学习笔记，关于组件的生命周期
+>
+> 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏
+>
+> 📢 愿你生活明朗，万物可爱
+
+## 引言
+
+在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下
+
+## React 生命周期
+
+React 生命周期主要包括三个阶段：初始化阶段，更新阶段，销毁阶段
+
+### 初始化阶段
+
+#### 1. constructor 执行
+
+`constructor` 在组件初始化的时候只会执行一次
+
+通常它用于做这两件事
+
+1. 初始化函数内部 `state`
+2. 绑定函数
+
+```js
+constructor(props) {
+    console.log('进入构造器');
+    super(props)
+    this.state = { count: 0 }
+}
+```
+
+现在我们通常不会使用 `constructor` 属性，而是改用类加箭头函数的方法，来替代 `constructor` 
+
+例如，我们可以这样初始化 `state`
+
+```js
+state = {
+	count: 0
+};
+```
+
+#### 2. static getDerivedStateFromProps 执行 （新钩子）
+
+这个是 React 新版本中新增的2个钩子之一，据说很少用。
+
+`getDerivedStateFromProps` 在初始化和更新中都会被调用，并且在 `render` 方法之前调用，它返回一个对象用来更新 `state`
+
+`getDerivedStateFromProps` 是类上直接绑定的静态（`static`）方法，它接收两个参数 `props` 和 `state`
+
+`props` 是即将要替代 `state` 的值，而 `state` 是当前未替代前的值
+
+> 注意：`state` 的值在任何时候都取决于传入的 `props` ，不会再改变
+
+如下
+
+```js
+static getDerivedStateFromProps(props) {
+    return props
+}
+ReactDOM.render(<Count count="109"/>,document.querySelector('.test'))
+```
+
+`count` 的值不会改变，一直是 109
+
+#### 2. componentWillMount 执行（即将废弃）
+
+> 如果存在 `getDerivedStateFromProps` 和 `getSnapshotBeforeUpdate` 就不会执行生命周期`componentWillMount`。
+
+该方法只在挂载的时候调用一次，表示组件将要被挂载，并且在 `render` 方法之前调用。
+
+这个方法在 React 18版本中将要被废弃，官方解释是在 React 异步机制下，如果滥用这个钩子可能会有 Bug
+
+#### 3. render 执行
+
+`render()` 方法是组件中必须实现的方法，用于渲染 DOM ，但是它不会真正的操作 DOM，它的作用是把需要的东西返回出去。
+
+实现渲染 DOM 操作的是 `ReactDOM.render()`
+
+> 注意：避免在 `render` 中使用 `setState` ，否则会死循环
+
+#### 4. componentDidMount 执行
+
+`componentDidMount` 的执行意味着初始化挂载操作已经基本完成，它主要用于组件挂载完成后做某些操作
+
+这个挂载完成指的是：组件插入 DOM tree 
+
+#### 初始化阶段总结
+
+执行顺序 `constructor` -> `getDerivedStateFromProps` 或者 `componentWillMount` -> `render` -> `componentDidMount`
+
+![image-20210821102153009](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/image-20210821102153009.png)
+
+### 更新阶段
+
+![image-20210821102622645](https://ljcimg.oss-cn-beijing.aliyuncs.com/img/image-20210821102622645.png)
+
+这里记录新生命周期的流程
+
+#### 1. getDerivedStateFromProps 执行
+
+执行生命周期`getDerivedStateFromProps`， 返回的值用于合并 `state`，生成新的`state`。
+
+#### 2. shouldComponentUpdat 执行
+
+`shouldComponentUpdate()` 在组件更新之前调用，可以通过返回值来控制组件是否更新，允许更新返回 `true` ，反之不更新
+
+#### 3. render 执行
+
+在控制是否更新的函数中，如果返回 `true` 才会执行 `render` ,得到最新的 `React element`
+
+#### 4. getSnapshotBeforeUpdate 执行
+
+在最近一次的渲染输出之前被提交之前调用，也就是即将挂载时调用
+
+相当于淘宝购物的快照，会保留下单前的商品内容，在 React 中就相当于是 即将更新前的状态
+
+> 它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给 `componentDidUpdate()`。如不需要传递任何值，那么请返回 null
+
+#### 5. componentDidUpdate 执行
+
+组件在更新完毕后会立即被调用，首次渲染不会调用
+
+---
+
+到此更新阶段就结束了，在 React 旧版本中有两个与更新有关的钩子函数 `componentWillReceiveProps` 和 `componentWillUpdate` 都即将废弃
+
+`componentWillReceiveProps` 我不太懂
+
+`componentWillUpdate` 在 `render` 之前执行，表示组件将要更新
+
+### 销毁阶段
+
+#### componentWillUnmount  执行
+
+在组件即将被卸载或销毁时进行调用。
+
+## 总结
+
+**初始化**
+
+- constructor()
+- static getDerivedStateFromProps()
+- render()
+- componentDidMount()
+
+**更新**
+
+- static getDerivedStateFromProps()
+- shouldComponentUpdate()
+- render()
+- getSnapshotBeforeUpdate()
+- componentDidUpdate()
+
+**销毁**
+
+- componentWillUnmount()
+
+---
+
+> 初学 React ，对生命周期还没有深入的理解，只能大概知道在什么时候触发哪个钩子，希望各位大佬多多指教，有什么建议可以提一提 🙏
+