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

大家好,我是六卿。
React_函数式Hooks和Class比较优缺点_第1张图片

Hooks and Class common ground(共同点)

一、无论是函数式组件return还是class组件render,它们都会返回一个reactDom节点,并且里面jsx的用法完全一致。不一样的地方在于this关键字的使用。

二、都可以实现声明周期,Hooks目前完全可以模拟出Class的生命周期。

三、都可以使用props接受父级传入的参数(无论是属性还是回调方法)。

四、…等等

React_函数式Hooks和Class比较优缺点_第2张图片

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,等等吧不说了,该干活了。

以上观点都是包括但不仅限于。
React_函数式Hooks和Class比较优缺点_第3张图片

其他文章

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实现模块数据共享,类似全局状态管理但不推荐做全局管理

六卿

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

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

你可能感兴趣的:(#,react,javascript,class,hooks,react,前端)