大家好，我是六卿。
Hooks and Class common ground（共同点）
一、无论是函数式组件return还是class组件render，它们都会返回一个reactDom节点，并且里面jsx的用法完全一致。不一样的地方在于this关键字的使用。
二、都可以实现声明周期，Hooks目前完全可以模拟出Class的生命周期。
三、都可以使用props接受父级传入的参数（无论是属性还是回调方法）。
四、…等等
Hooks and Class difference（不同点）
一、首先，声明周期的用法不同，Class的生命周期钩子直接在类中定义即可，可以直接使用，
但是在函数式组件我们只能通过Hooks的副作用函数来模拟声明周期，useEffect可以实现多个生命周期钩子。可以参考这篇文章：React中函数式Hooks之useEffect的使用
二、在性能优化方面：在类组件我们使用纯组件PureComponent或者shouldComponentUpdata来控制组件的更新，
在函数组件红我们可以使用memo实现纯组件的浅比较，同时可以使用useMemo和useCallback这两个hook来对属性和函数进行优化，需要子组件配合memo或者pureComponent。可以参考这篇文章：React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
三、在函数式组件中无需再考虑this指向的问题；
四、声明state的方法，在Class中我们可以直接在类中声明state对象：
state={
name:"",
age:"",
}
AI 代码解读
改变state中的状态：
this.setState({
name:"六卿",
age:18
})
AI 代码解读
在函数式组件中我们需要借助hook来实现，useState；
可以参考这篇文章：React中函数式Hooks之useState的使用
const [name,setName] = useState("")
const [age,setAge] = useState("")
AI 代码解读
改变state中的状态：
setName("六卿")
setAge(18)
AI 代码解读
看起来都还好，但是一旦state中的变量多了的话，看起来还是class的形式声明和赋值更简单一些，为了解决useState这个弊端，我们可以使用useReducer来实现但组件redux。可以参考这篇文章：Hooks中使用useReducer实现表单数据的提交，解决多次使用useState的问题
其实还有很多，比如location和history的使用都是从react-dom中解构出来的hook，等等吧不说了，该干活了。
以上观点都是包括但不仅限于。
其他文章
1.hooks实现toDoList
2.hooks实现左添右减
3.React实现添加多行输入框(点击一行增加一行)
4.React页面跳转取消上一个页面的所有请求
5.React配合axios请求拦截校验session，403跳转至登陆页面
6.Hooks使用createStore、Provider、useSelector、useDispatch实现connect功能
7.Hooks使用useReducer、createContext 、useContext实现模块数据共享，类似全局状态管理但不推荐做全局管理
六卿
见贤思齐焉，见不贤内自省AI 代码解读
