本人技术栈是Vue，最近调部门改成用React开发，从头开始踩坑，持续更新中~
11月18日内容汇总
React 组件生命周期调用顺序
挂载
组件实例被创建并插入DOM
constructor()static getDerivedStateFromProps()render()componentDidMount()
更新
当组件的 props 或 state 发生变化时会触发更新
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
卸载
当组件从 DOM 中移除时会进行调用
componentWillUnmount()
错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时会进行调用
static getDerivedStateFromError()componentDidCatch()
更多内容参考：
常用生命周期方法
2.x 的生命周期函数与新版 Composition API 之间的映射关系：
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
注意：beforeCreate 和 created 在 Vue3 中已经由 setup 替代。
参考资料
Vue 3.0 有很多借鉴了 React 的地方，看了 React 文档之后 可以对比着看下 Vue 3.0 。
Vue 3.0 修炼手册
抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些…
API 手册 - Vue 组合式 API
Koa 快速入门系列
【从前端到全栈】- koa快速入门指南
【进阶篇】koa+Mysql的全栈之旅
【全栈之旅】NodeJs登录流程以及Token身份验证
11月17日内容汇总
React Hooks的用法
函数组件有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法。React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。
四个常用Hooks
useState()
useContext()
useReducer()
useEffect()
useState() 用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。
import React, { useState } from "react";
export default function Button() {
const [buttonText, setButtonText] = useState("Click me, please");
function handleClick() {
return setButtonText("Thanks, been clicked!");
}
return ;
}useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。
useEffect(() => {
// 这里调接口
}, [dependencies])useEffect() 接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，可以省略。组件第一次渲染时， useEffect() 就会执行。当依赖项的数组发生变化， useEffect() 也会执行。
Vue 3.0 的Composition API借鉴了React Hooks
轻松学会 React 钩子：以 useEffect() 为例 - 阮一峰
React Hooks 入门教程 - 阮一峰
React中Fragment的用法
与 Vue 类似， React 组件要求 return 的内容必须由唯一根元素包裹，否则就会报错。
如果希望在不额外创建DOM元素的情况下 return 多个元素，就可以用到Fragment。
render() {
return (
Some text.
A heading
);
}Vue 中的 template 也是虚拟元素，但还是有区别
在 template 中的元素必须要唯一根元素包裹
template 仅仅只是在条件渲染的时候可以不用引入新的DOM元素
Vue 3.0 中也提供了类似 React 的 Fragment
Fragment还有一种简写语法 <> 。key ，但是 <> 不行。
render() {
return (
<>
Some text.
A heading
);
}另外react 16开始， render支持返回数组，可以减少不必要的节点嵌套。
export default function () {
return [
1,
2,
3
];
}
Vue 3.0 的
render 函数同样也支持返回数组
组件继承的两种写法
以上面的Fragment为例，如果只引入 React ，那么使用就要像这样
import React from "react";
function App() {
return (
{/* Some text here */}
)
}如果像下面这样引入，就可以像这样使用
import React, { Fragment } from "react";
function App() {
return (
{/* Some text here */}
)
}严格模式
嵌套在 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
严格模式检查仅在开发模式下运行； 它们不会影响生产构建。
import React from 'react';
function ExampleApplication() {
return (
);
}11月16日内容汇总
React事件类型
输入框：onChange，onKeyUp
按钮：onClick
React监听回车事件
onKeyup(e) {
if(e.keyCode === 13) {
this.handleBtnClick()
}
}报错信息
Cannot update during an existing state transition (such as within
render)
这个一般是事件处理函数的 this 没有绑定导致的 。
报错信息
Failed prop type: You provided avalueprop to a form field without anonChangehandler. This will render a read-only field.
受控组件表单必须要绑定 onChange 事件，否则这个表单就是只读，无法修改。
不能修改的前提是 value 被赋了一个常量。如果将空值 null 赋给 value ，还是可以修改的。
受控组件：自身的value值由组件的state托管，这也是 React 官方推荐的。
上面的代码中， value 用来给表单赋值， onChange 事件用于触发事件处理函数修改 state 。在 Vue 中直接就是一个语法糖 v-model 。
非受控组件：value由第三方库或者DOM进行托管。
文件上传是典型的非受控组件。
React修改antd原生样式
在 Vue 中直接修改是不生效的，需要通过样式穿透 >>> 或 ::v-deep 。
在 React 里面，调出控制台找到组件对应的类名，然后在样式文件中直接修改就行。