Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1.准备

1.1 什么是 Hook

Hooks 译为钩子，Hooks 就是在函数组件内，负责钩进外部功能的函数。

React 提供了一些常用钩子，React 也支持自定义钩子，这些钩子都是用于为函数引入外部功能。

当我们在组件中，需要引入外部功能时，就可以使用 React 提供的钩子，或者自定义钩子。

1.2 动机

在组件之间复用状态逻辑很难
React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。
你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
复杂组件变得难以理解
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

1.React.memo

1.1 基本介绍

这是一个高阶组件，用来做性能优化的，这个本来应该是写在React高级指引中的，但是这个案例会和后面的useCallback联合起来，所以就写在这里了

• React.memo() 是一个高阶组件，如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。
• 它接收另一个组件作为参数，并且会返回一个包装过的新组件
• 包装过的新组件就会具有缓存功能，这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
• 包装过后，只有组件的props发生变化，才会触发组件的重新的渲染，否则总是返回缓存中结果。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。

1.什么是 React 脚手架？

在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。

在我们的 React 项目中，脚手架的作用与之有异曲同工之妙

React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一，也是用 React 创建 SPA 应用的最佳方式

2.为什么要用脚手架？

render()调用时机：初始化渲染，状态更新后
componentDidMount调用时机：组件挂载页面之后调用

java中bean对象拥有完整生命周期，react中组件和bean对象同等地位，拥有完整的生命周期。

1.简介

组件从创建到死亡，会经过一些特定的阶段

React组件中包含一系列钩子函数{生命周期回调函数}，会在特定的时刻调用

我们在定义组件的时候，会在特定的声明周期回调函数中，做特定的工作

在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下

1.React简介

react是什么？

React 是一个用于构建用户界面的 JavaScript 库。

• 是一个将数据渲染为 HTML 视图的开源 JS 库
• 它遵循基于组件的方法，有助于构建可重用的 UI 组件
• 它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？

1. 使用虚拟 DOM 而不是真正的 DOM
2. 它可以用服务器渲染
3. 它遵循单向数据流或数据绑定
4. 高效
5. 声明式编码，组件化编码

1.setState 扩展

1.1 对象式 setState

首先在我们以前的认知中，setState 是用来更新状态的，我们一般给它传递一个对象，就像这样

this.setState({
    count: count + 1
})

1.组件优化

1.1 shouldComponentUpdate 优化

在我们之前一直写的代码中，我们一直使用的Component 是有问题存在的

1. 只要执行 setState ，即使不改变状态数据，组件也会调用 render
2. 当前组件状态更新，也会引起子组件 render

而我们想要的是只有组件的 state 或者 props 数据发生改变的时候，再调用 render

1.准备

1.1 SPA

而为了减少这样的情况，我们还有另一种应用，叫做 SPA ，单页应用程序

它比传统的 Web 应用程序更快，因为它们在 Web 浏览器本身而不是在服务器上执行逻辑。在初始页面加载后，只有数据来回发送，而不是整个 HTML，这会降低带宽。它们可以独立请求标记和数据，并直接在浏览器中呈现页面

1.2 什么是路由？

路由是根据不同的 URL 地址展示不同的内容或页面

在 SPA 应用中，大部分页面结果不改变，只改变部分内容的使用，非单页应用，点击导航会刷新整个页面，单页应用，只会刷新页面中的局部内容。

React的事件是通过onXxx属性指定事件处理函数

React 使用的是自定义事件，而不是原生的 DOM 事件

React 的事件是通过事件委托方式处理的，向上委托（为了更加的高效）

可以通过事件的 event.target.value获取发生的 DOM 元素对象，可以尽量减少 refs的使用

事件中必须返回的是函数

1.React事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

1、组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

只有两种方式的组件:

• 函数组件
• 类式组件

注意:

1. 组件名必须是首字母大写（React 会将以小写字母开头的组件视为原生 DOM 标签。例如，< div />代表 HTML 的 div 标签，而< Weclome /> 则代表一个组件，并且需在作用域内使用 Welcome）
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签 < />