前言
文档是第一生产力
首先,我先diss一波React的官方文档。
当我看到React要重写
文档的时候,我内心一阵窃喜。我以为的图文并茂,边学边练,双管齐下的教学文档终于要来到了,结果...
好在,最终还是呈现了由简入繁,步步深入的效果,时隔一年,再次拜读,再次感受作者的良苦用心
~
16.8+
16.8是React的重大更新,称之为变革
也不为过。本次更新引入了一个重要特性 - Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
关于Hook的介绍,请查阅React文档
React 16.8.0 是第一个支持 Hook 的版本。
Class与Hook
设计Hooks的三大动机
- 在组件之间复用状态逻辑很难
onScroll = () => {
// todo
}
componentDidMount() {
document.addEventListener('scroll', this.onScroll, false);
}
componentWillUnmount() {
document.removeEventListener('scroll', this.onScroll, false);
}
当多个组件中都有相同的逻辑的时,复用
就会变得很难
采取暴力copy
就成了最简单的做法
当然高阶组件(Hoc)
也是常见的解决办法,关于高阶组件我们在此不再展开。但无论使用哪种方式,代码就会存在很多嵌套,这些代码让我们不管是编写和设计上来说,都变得非常困难
- 复杂组件变得难以理解
onScroll = () => {
// todo
}
componentDidMount() {
document.addEventListener('scroll', this.onScroll, false);
this.getList()
this.subscribeToFriendStatus()
...
}
componentWillUnmount() {
document.removeEventListener('scroll', this.onScroll, false);
}
还是以上面的代码为例:随着业务的增加,componentDidMount
中会包含着各种各样的逻辑,同时componentWillUnmount
中还会进行各种移除操作
,很容易造成业务错乱或者漏写的情况
- 难以理解的 class
- Class中,开发者必须去搞懂每个
this指向问题
,长期变得很难维护 - 大量的代码堆在一个文件中,看起来跟天书一样,很难去拆
改变
- 自定义Hook组件提取 可以轻松做到组件间的状态逻辑的复用
- 真正全面拥抱函数式编程,Hooks的函数式编程可以减少组件的嵌套
- 可以在不编写 class 的情况下使用state以及其他React 特性
- 组件拆分、组合更加方便,编写的代码更加简洁明了,易于维护
没有破坏性改动
在我们继续之前,请记住 Hook 是:
- 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想,你不必现在就去学习或使用 Hook。
- 100% 向后兼容的。 Hook 不包含任何破坏性改动。
没有计划从 React 中移除 class。最重要的是,Hook 和现有代码可以同时工作,你可以渐进式地使用他们
Hook 不会影响你对 React 概念的理解。
React没有计划 移除 class。
官方文档地址: Hook 简介
Hook
Hook的优点
-
函数式组件
Hooks 只能在函数组件中使用,直接就强制避免了类结构对开发者、代码分析器等角色造成的困惑性。
-
组件层级变浅,维护性提高
用户编写复杂组件,有利于改善
嵌套地狱
问题 -
极简的代码风格,可读性高
用户只需要将特定的代码整合,方便后期阅读
Hook的缺点
- 不能完全的取代Class
比如 getSnapshotBeforeUpdate、getDerivedStateFromError,现在还没有实现,所以我们暂时没有办法通过创建 ErrorBoundary
来捕获运行时渲染异常
- 上手容易,用好很难
用户初期很容易使用useState
和 useEffect
就可以完成大部分业务的功能
但是后续的各种优化:如性能优化、复杂组件的拆分极其考验开发者的经验
老项目还是使用class进行维护吧,尽量的不要去重写它
展望
如今Vue和React二分天下,在开发效率率和维护效率不断提升的今天,更简洁、更高效的开发体验才是王道,而Vue更是以容易上手著称
React从13年发布至今,即将运行了10年了。回想以前的技术,JQ已经被时代淘汰,angular因太难在国内难以流行。而Vue2更是参考了React和Ag的优点火遍全网,随着Vue3的诞生,新特性更加方便快捷。我相信React也会进行变革,期待越来越好