前言

文档是第一生产力

首先，我先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的三大动机

1. 在组件之间复用状态逻辑很难

onScroll = () => {
    // todo
}

componentDidMount() {
    document.addEventListener('scroll', this.onScroll, false);
}

componentWillUnmount() {
    document.removeEventListener('scroll', this.onScroll, false);
}

当多个组件中都有相同的逻辑的时，复用就会变得很难

采取暴力copy就成了最简单的做法

当然高阶组件(Hoc)也是常见的解决办法，关于高阶组件我们在此不再展开。但无论使用哪种方式，代码就会存在很多嵌套，这些代码让我们不管是编写和设计上来说，都变得非常困难

1. 复杂组件变得难以理解

onScroll = () => {
    // todo
}

componentDidMount() {
    document.addEventListener('scroll', this.onScroll, false);
    
    this.getList()
    
    this.subscribeToFriendStatus()
    
    ...
}

componentWillUnmount() {
    document.removeEventListener('scroll', this.onScroll, false);
}

还是以上面的代码为例：随着业务的增加，componentDidMount中会包含着各种各样的逻辑，同时componentWillUnmount中还会进行各种移除操作，很容易造成业务错乱或者漏写的情况

1. 难以理解的 class

• Class中，开发者必须去搞懂每个this指向问题，长期变得很难维护
• 大量的代码堆在一个文件中，看起来跟天书一样，很难去拆

改变

• 自定义Hook组件提取 可以轻松做到组件间的状态逻辑的复用
• 真正全面拥抱函数式编程，Hooks的函数式编程可以减少组件的嵌套
• 可以在不编写 class 的情况下使用state以及其他React 特性
• 组件拆分、组合更加方便，编写的代码更加简洁明了，易于维护

没有破坏性改动

在我们继续之前，请记住 Hook 是：

• 完全可选的。  你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
• 100% 向后兼容的。  Hook 不包含任何破坏性改动。

没有计划从 React 中移除 class。最重要的是，Hook 和现有代码可以同时工作，你可以渐进式地使用他们

Hook 不会影响你对 React 概念的理解。

React没有计划 移除 class。

官方文档地址: Hook 简介

Hook

Hook的优点

1. 函数式组件

   Hooks 只能在函数组件中使用，直接就强制避免了类结构对开发者、代码分析器等角色造成的困惑性。

2. 组件层级变浅，维护性提高

   用户编写复杂组件，有利于改善嵌套地狱问题

3. 极简的代码风格，可读性高

   用户只需要将特定的代码整合，方便后期阅读

Hook的缺点

1. 不能完全的取代Class

比如 getSnapshotBeforeUpdate、getDerivedStateFromError，现在还没有实现，所以我们暂时没有办法通过创建 ErrorBoundary 来捕获运行时渲染异常

1. 上手容易，用好很难

用户初期很容易使用useState 和 useEffect就可以完成大部分业务的功能

但是后续的各种优化：如性能优化、复杂组件的拆分极其考验开发者的经验

老项目还是使用class进行维护吧，尽量的不要去重写它

展望

如今Vue和React二分天下，在开发效率率和维护效率不断提升的今天，更简洁、更高效的开发体验才是王道，而Vue更是以容易上手著称

React从13年发布至今，即将运行了10年了。回想以前的技术，JQ已经被时代淘汰，angular因太难在国内难以流行。而Vue2更是参考了React和Ag的优点火遍全网，随着Vue3的诞生，新特性更加方便快捷。我相信React也会进行变革，期待越来越好