通过一个全新的课程，了解React中功能组件的巨大改进，告诉你如何根据这些新的和即将到来的API重构一个现有的应用程序。
好吧，在我进入正题之前，我可以说这个课程的艺术工作由玛吉-阿普顿和Maxime Bourgeois这绝对是最棒的，实在是太好了。😍
我非常高兴能与大家分享这个课程。我全职使用React已经快三年了，我从未像开始玩Hooks和Suspense时那样对编写组件感到如此兴奋（！）。让我们快速了解一下你能从该课程中得到什么。
关于本课程
随着React中通过钩子和悬念对功能组件的大规模改进，你可能有兴趣看看如何将一个典型的类组件重构为一个使用React悬念和钩子特性的更简单的类组件。在本课程中，Kent将采用一个使用类的现代React代码库，并将整个代码库重构为尽可能地使用函数组件。我们将研究状态、副作用、异步代码、缓存等问题。
想了解钩子和悬念的入门知识吗？ 请看我的React钩子和悬念播放列表!
注：React Hooks是阿尔法**并可能会有变化。React团队已经16.x路线图在这里.
将React应用重构为React Hooks和React Suspense的介绍
让我们快速了解一下本课程的内容，以及本课程的结构，以确保你在使用这些新功能时能尽可能地提高工作效率。
将一个带有React钩子的类组件重构为一个函数
我们有一个基于渲染道具的类组件，它允许我们用给定的查询字符串和变量进行GraphQL请求，并使用GitHub graphql客户端，在React上下文中进行请求。让我们把它重构为一个使用useReducer、useContext和useEffect这些钩子的函数组件。
用useRef钩子处理React的useEffect钩子中的深度对象比较
React的useEffect 钩子的第二个参数是你的useEffect 回调的依赖性数组。当该数组中的任何值发生变化时，效果回调就会重新运行。但我们传递给该数组的variables 对象是在渲染过程中创建的，所以我们的效果将在每次渲染时重新运行，即使该对象的形状是一样的。所以让我们通过在效果回调中做我们自己的平等检查来解决这个问题。
通过useEffect钩子安全地设置挂载的React组件的状态
在这个组件的经典版本中，我们有一个名为safeSetState的方法，在尝试调用setState 之前，会检查组件是否仍然被挂载。这是因为我们的graphql客户端库无法取消飞行中的请求。让我们通过使用useRef 和useEffect 钩子来跟踪我们组件的挂载状态，使这种事情也能顺利进行。
因为钩子的代码是普通的JavaScript，把它提取到自己的函数中是很容易的，而且可以以一种非常好的方式实现代码共享。它也让我们能够非常干净地封装和分离关注点。自定义钩子也可以很好地组合在一起，从更原始的钩子中建立更复杂的钩子。 让我们通过创建一个useSetState 和useSafeSetState自定义钩子来做到这一点。
如果你想要一个更全面的useSetState 钩子，可以试试use-legacy-state试试吧。
在自定义usePrevious钩中用React useRef追踪渲染过程中的值
我们追踪前一个值的钩子看起来非常有用，所以让我们把它提取到它自己的自定义React钩子中，叫做usePrevious 。
在自定义React Hook的useEffect中深度比较输入值
如果useEffect ，为我们做深度数值比较，那就太好了。我们为什么不自己做一个自定义的钩子来为我们做这个呢？在这一课中，我们将创建一个useDeepCompareEffect ，这将允许我们像使用useEffect一样使用它，并允许我们只传递输入。
用useContext和useState钩子重构一个React类组件
我们有一个非常简单的用户类组件，它管理着一些状态并使用一些上下文。让我们把它重构为一个使用useContext 和useState 钩子的函数组件。
重构一个渲染道具组件到一个自定义React钩子
我们的<Query /> 组件是一个基于渲染道具的组件，<User />组件也使用这个组件。但是因为它不渲染任何东西，我们实际上可以直接把它改成一个自定义钩子。让我们创建一个useQuery 钩子，从Query组件使用的钩子中返回状态，并使用它来代替。但我们将保留这个组件，这样我们就不必在所有使用Query渲染道具的组件上进行重构，而且我们可以保持我们的测试通过。
在React组件重构中处理componentDidMount和componentWillUnmount到Hooks
让我们把我们的GitHubClientProvider 类组件重构为一个使用钩子的函数组件。这个非常有趣，因为我们可以使用useEffect 来封装我们对一个效果的所有需求，真正地在我们的组件中分离出这个问题。
用React.lazy和Suspense动态导入React组件
随着React 16.6.0，React Suspense作为一个稳定的功能被正式发布（对React.lazy ）。让我们重构我们的懒惰加载的组件，这些组件正在使用react-loadable到使用内置React.lazy功能的组件。
用useEffect钩子预加载React组件
当用户在我们的主页上填写表格时，预先加载他们将要去的下一个页面是个好主意，这样他们就不必在填写完表格后等待页面加载。React的useEffect 钩子使这一点非常容易。
