React

我们学完了 react-hooks 的一些基础内容，现在是我们的一个实战环节。 项目的功能与我们的 React 教程内容相似。具体可参考

到此为止，我们的 hooks 系列只剩下最后一个大案例了。现在我们来对之前的内容做一个回顾。 hooks 是 React 16.8 新增的特性，它可以在不编写 类组件 的情况下使用 state 以及其

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 hook 都是函数，所以也同样适用这种方式。

把内联回调函数及依赖项数组作为参数传入 useCallback ，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性

useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

通过 useEffect 的 Hook，可以告诉 React 需要在渲染后执行某些操作；而 useEffect 的第一个参数要求我们传递一个函数，在 React 执行完更新

useState() 用于为函数组件引入状态。纯函数不能有状态，所以使用钩子来引入状态。 简单来讲，useState 就是为函数组件提供了 React state 的功能，现在就可以称为函

react 的核心思想就是，将一个页面拆成一堆独立的，可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但如果你在大型的工作项目中用 react，你会发现你的项目中实际上很多

目前网络上有许多学习资料，[React 官方学习网站](https://zh-hans.reactjs.org/docs/hooks-intro.html) 中的内容，讲述虽然详细，但是在例子上，较为

我们这次学了一些新内容，我们需要将之前的改版。 首先我们需要登录页面，并且通过HOC（高阶组件）添加鉴权功能。加上路由跳转，完善页面。

react-router 是一组以声明方式与您的应用程序组合的导航组件，换句话，react-router 是 React 体系中的路由库，它通过管理 URL，实现组件的切换和状态的变化

什么是高阶组件呢？相信很多同学都听说过，也用过高阶函数，它们非常相似，所以我们可以先来回顾一下什么是高阶函数。 高阶函数的维基百科定义：至少满足以下条件之一：

这节我们将介绍 `React` 中受控组件和非受控组件的概念及其使用。 本文会向你介绍以下内容： - 什么是受控组件/非受控组件 - 受控组件 - 非受控组件

这节我们将介绍 React 中 setState ，以及在 React 到底是怎么去做这件事情的。希望可以帮助大家真正理解 setState。

我们使用了 React 组件间通信的相关知识，组件化的内容将之前的实战案例进行改版，优化之前的实战方案。

这节我们将介绍 React 中非父子组件的通信，父子组件间的通信可通过 props 和回调函数完成，随着应用程序越来越大,使用 props 和回调函数的方式就变得非常繁琐了，这节介绍非父子组件间通信。

组件间通信的知识在React是非常重要。这节我们将介绍 React 中父子组件通信的方法，父与子通信，子与父通信的方法。

学到这里，我们把上面案例给修改一下，不要通过原始的 html 加 CDN 的方法引入 React，我们来采用 React 给我们提供的脚手架来改写一下上次的内容。

很多的事物都有从创建到销毁的整个过程，这个过程称之为是 生命周期 ；React 组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；