课程介绍
在对 React 设计思路进行讲解后，本节课将重点带来有关 React 两大写法之一的 Hooks 写法，该写法也是目前学企界中常用的写法之一，此外，讲师还将在本节课为大家讲解 React 实现层的重要知识，帮助大家更好地上手后续的 React 代码操作。
课程重点
- 代码介绍
- Live Code
- React 的实现基本概要
- React 的实现 - Problem 1 & 2
- React 的实现 - How to Diff
Hook是什么
Hook 这是"钩子"的意思。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。
你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。
所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。
举例 useState() 函数
在 React 中，组件中，声明一个新状态需要手动去调用这个 useState 这个函数，这个函数传入一个状态的初始值，然后它返回一个数组，这个数组的第一个是这个状态本身 count ，第二个是这个状态的 setCount。
就是如果你要改变 count，使它＋1，你不会直接写 count = count + 1， 而是需要手动的调用 setCount(count + 1)
为什么要这么做呢？
简单来理解，React 给你封装过一层。如果你直接修改，React 就不能接管它去帮你做一些事情。你就用这个它封装好的函数去做一些事情，React 才能帮你做一些状态刷新。
如上图，每当点击一下 button 执行一次1，就会使2的 count 增加1，但是我们并没有手动更新 UI 就实现了 +1 的功能。
useEffect()函数是干什么的？
如下图，增加了一个函数 useEffect() ，这个函数是干嘛的呢？
这里给大家普及一个概念，这个概念叫副作用，怎么理解副作用呢？
一个组件内部如果只是单纯的执行一个语句，比方说执行A = B + C ，那它不会给这个组件外部的任何东西造成影响。 但是有一些操作就会给这个组件外部造成影响。
比如说它发起一个网络请求，它是和外部系统做了一个交互，它和本地的session或者本地的localstorage去存了一个字段，这也是改变了一个外部请求，它不是纯函数。
但是这边的 useEffect() 红色区域，改变了外部的 count。
什么是hooks？
从 React 中调用的函数，你可以挂载到 React 生命周期上的函数。
React 的实现
Problems
- JSX 不符合 JS 标准
- 返回的 值 发生改变时， 如何更新 DOM
- State/Props 更新时，要重新触发 render函数
Problems1
左侧把不符合标准的转为标准的。
Problems2
DOM的操作的很消耗性能的。 所以出现了 diff ，我们希望这个 diff 尽可能的小，计算 diff 的时间尽可能的短。
真实的 DOM 不是 JS 中的对象，真实的 DOM 是浏览器内部维护的一个状态，我们只能通过 DOM 接口去修改 DOM，我们不能直接去随便修改 DOM。 但是我们可以声明一个和 JS 有对应关系的变量。
Problems3
指令式编程
声明式API
响应式编程是声明式编程的一个类别，不仅能声明UI，而且能自动更新UI。
既然所有的前端框架都是声明式的，那么为什么我们不把声明式的能力直接植入浏览器里？
因为浏览器作为一个应用平台，不能给你提供一个更高层的东西，这样把自由度失去了。
老师讲的很细，挺好的，加油！
