React_函数式Hooks和Class比较优缺点

大家好，我是六卿。

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:"",
	}

改变state中的状态：

this.setState({
	name:"六卿",
	age:18
})

在函数式组件中我们需要借助hook来实现，useState；
可以参考这篇文章：React中函数式Hooks之useState的使用

const [name,setName] = useState("")
const [age,setAge] = useState("")

改变state中的状态：

setName("六卿")
setAge(18)

看起来都还好，但是一旦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实现模块数据共享，类似全局状态管理但不推荐做全局管理

六卿

见贤思齐焉，见不贤内自省

个人见解，不对之处还请斧正。