mirror of
https://github.com/cheetahlou/CategoryResourceRepost.git
synced 2025-11-16 06:03:45 +08:00
mod
This commit is contained in:
louzefeng
@@ -0,0 +1,275 @@
|
||||
<audio id="audio" title="01｜认识 React：如何创建你的第一个 React 应用？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/59/03/59b54f59953fa8c28a5905e85dec9203.mp3"></audio>
|
||||
|
||||
你好，我是王沛。欢迎来到我们的第一节课：认识 React ，并创建你的第一个 React 应用。
|
||||
|
||||
在这一讲，我会先带你了解React的创新之处，从而理解为什么它能成为最为主流的前端框架。然后再来学习和理解React的基本概念，帮助你了解 React 。最后，我会通过一个实战项目，带着你创建你的第一个React应用。
|
||||
|
||||
# React的颠覆式创新
|
||||
|
||||
React 的中文含义是“反应”或“响应”，它描述了 React 这样一个前端框架的核心原理：**当数据发生变化时，UI 能够自动把变化反映出来**。这在 React 当时出现的背景之下，可以说是**一个颠覆式的创新**。
|
||||
|
||||
我之所以用“颠覆”这个词，是因为它不仅提供了一个框架，而且彻底改变了前端的开发思路，甚至电脑桌面、手机应用的开发也受到了 React 开发思路的影响。
|
||||
|
||||
在2013年 React 出现之时，主流的开发 UI 的方式仍然是基于浏览器 DOM 的 API，去精细地控制 DOM 节点的创建、修改和删除。为了保证 UI 上的一致性，我们需要非常小心地处理因各种数据的变化而导致的 UI 的变化。
|
||||
|
||||
举个例子。对于一个聊天应用，当来了一条新消息时，我们一方面需要在聊天框内添加一条新消息，同时也要在显示消息数量的地方让数字加1，这样才能保证 UI 的一致性。
|
||||
|
||||
在 React 之前，我们需要调用 DOM 的 API 来修改 DOM 树的结构，从而改变 UI 的展现。而在有了 React 之后，我们只需要在业务状态和 UI 状态之间建立一个绑定的关系就行了。绑定完成后，我们就不需要再关心怎么去精细控制 UI 的变化，因为React 会在数据发生变化时，帮助我们完成 UI 的变化。
|
||||
|
||||
下面这张图就展示了这样的一个机制：<br>
|
||||
<img src="https://static001.geekbang.org/resource/image/16/51/16cd47a89b804fa19f172c4d5074b151.png" alt="">
|
||||
|
||||
可以看到，我们可以通过 JSX 语法，用声明式的方式来描述数据和 UI 之间的关系，那么数据在发生变化时，UI 也会自动发生变化。这样的话，无论是收到一条还是多条消息，React 都会自动完成 UI 的展现，我们也就不再需要去关心怎么产生变化的细节。那么基于同一个数据，比如我们需要在通知栏里显示消息的数量，那么显示消息数量的组件，只需要绑定到消息的长度上，它也会自动更新，这样很容易就保证 UI 上的一致性了。
|
||||
|
||||
通过我刚才对这张图的解释，你可能还会有些不理解，主要是出现了一些比较陌生的概念。别着急，接下来我就带你理解React的基本概念，学完之后，你会对 React 是如何工作的有更全面的认识。
|
||||
|
||||
# 理解 React 的基本概念
|
||||
|
||||
React 本身其实是一个非常简单的框架，要理解它的用法，无外乎就是理解下面三个概念：组件、状态和 JSX。下面我们分别来看。
|
||||
|
||||
## 使用组件的方式描述 UI
|
||||
|
||||
在 React 中，所有的 UI 都是通过**组件**去描述和组织的。可以认为，React 中所有的元素都是组件，具体而言分为两种。
|
||||
|
||||
1. 内置组件。内置组件其实就是**映射到 HTML 节点的组件**，例如 div、input、table 等等，作为一种约定，它们都是小写字母。
|
||||
1. 自定义组件。自定义组件其实就是**自己创建的组件**，使用时必须以大写字母开头，例如TopicList、TopicDetail。
|
||||
|
||||
和 DOM 的节点定义类似，React 组件是以**树状结构**组织到一起的，一个 React 的应用通常只有一个根组件。此外，在实际开发时，我们会把 UI 划分成不同的组件，然后组织到一起，例如对于下面这样一个评论框的 UI：
|
||||
|
||||
<img src="https://static001.geekbang.org/resource/image/90/c5/9014a72ce4cb007cc43dff678a4648c5.png" alt="">
|
||||
|
||||
我们可以用基于组件的方式去描述：
|
||||
|
||||
```
|
||||
function CommentBox() {
|
||||
return (
|
||||
<div>
|
||||
<CommentHeader />
|
||||
<CommentList />
|
||||
<CommentForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
比如说评论框可以分为三个部分，包括头部、评论的列表和一个用于提交新的评论的表单，这样我们就可以把这三个部分分别定义成组件，让我们可以根据实际的场景把复杂的 UI 模块化为独立的组件。这样代码不仅看起来更加直观，而且也更容易维护。
|
||||
|
||||
## 使用 state 和 props 管理状态
|
||||
|
||||
正如我刚才提到的，React 的核心机制是能够在数据发生变化的时候自动重新渲染 UI，那么势必要有一个让我们保存状态的地方，这个保存状态的机制就是 state。而 props 就是类似于 Html 标记上属性的概念，是为了在父子组件之间传递状态。
|
||||
|
||||
在函数组件中，我们可以使用 useState 这样一个 Hook来保存状态，那么状态在发生变化时，也会让 UI 自动发生变化。比如下面这段代码，展示了一个简单计数器的实现的例子：
|
||||
|
||||
```
|
||||
import React from "react";
|
||||
|
||||
export default function Counter() {
|
||||
const [count, setCount] = React.useState(0);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => setCount(count + 1)}>{count}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
可以看到，通过 useState 定义这样一个状态，让这个状态来保持计数器的数值，那么在值发生变化时，组件就会自动重新刷新。这里我们先不用太关心 useState 这个 API 的细节，我在第4讲会有一个详细的介绍。
|
||||
|
||||
那么，现在使用了 state 来维护组件的状态，接下来要关心的就是组件之间的交互，这正是props 提供的作用。
|
||||
|
||||
无论是 div、span 这样的内置组件，还是自定义组件，都可以在使用时把接收属性作为参数。而当这个参数发生变化时，组件也就会自动重新渲染。
|
||||
|
||||
例如，我们在计数器这个例子中使用一个组件来渲染 count 这个值，要求在值大于10的时候显示为红色，否则就为蓝色：
|
||||
|
||||
```
|
||||
import React from "react";
|
||||
|
||||
function CountLabel({ count }) {
|
||||
// 子组件用于显示颜色
|
||||
const color = count > 10 ? "red" : "blue";
|
||||
return <span style={{ color }}>{count}</span>;
|
||||
}
|
||||
|
||||
export default function Counter() {
|
||||
// 定义了 count 这个 state
|
||||
const [count, setCount] = React.useState(0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => setCount(count + 1)}>
|
||||
<CountLabel count={count} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
可以看到，我们定义了一个新的组件 CountLabel，在值大于10的时候显示红色，否则为蓝色。并且，我们还要在Counter 组件里使用 CountLabel 这个子组件，这样的话我们就可以通过 props 把 count 这个值从父组件传递到子组件，那么在 count 发生变化时，CountLabel 也会重新渲染。此外，所有通过属性定义在 <countlabel> 这个 Tag 上的参数，都会作为一个对象传递给函数组件，这样在函数组件内部就可以使用这些参数了。</countlabel>
|
||||
|
||||
## 理解 JSX 语法的本质
|
||||
|
||||
我们刚刚通过一个简单的例子对 React 组件有了一个比较直观的印象，但如果你之前没有接触过 React，也许会觉得在代码中同时包含 JavaScript 和 HTML 标记的写法很别扭。但这种写法其实正是 React 中的“模板语言”：JSX。
|
||||
|
||||
注意，这里的“模板语言”是加了引号的，因为从本质上来说，JSX 并不是一个新的模板语言，而可以认为是一个**语法糖**。也就是说，不用 JSX 的写法，其实也是能够写 React 的。这是什么意思呢？我们不妨再看一下上面计数器的例子，如果不用 JSX 应该如何写代码：
|
||||
|
||||
```
|
||||
React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"button",
|
||||
{ onClick: function onClick() {
|
||||
return setCount(count + 1);
|
||||
} },
|
||||
React.createElement(CountLabel, { count: count })
|
||||
)
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
在这段代码中，JSX 的部分我们是用 JavaScript 的方式去实现的，并且用到了 React.createElement 这样一个 API，它的作用就是创建一个组件的实例。此外，这个 API 会接收一组参数：
|
||||
|
||||
- 第一个参数表示组件的类型；
|
||||
- 第二个参数是传给组件的属性，也就是props；
|
||||
- 第三个以及后续所有的参数则是子组件。
|
||||
|
||||
所以呢，通过 createElement 这个 API，我们可以构建出需要的组件树，而 JSX 只是让这种描述变得更加直观和高效。所以我们说JSX其实是一种语法糖。理解这一点非常重要，因为它意味着两点：
|
||||
|
||||
1. JSX 的表达能力等价于 JavaScript 的表达能力，那么所有我们可能需要的机制，比如循环、条件语句等等，JSX 其实都能灵活表达。
|
||||
1. JSX 几乎不需要学习，只要你会用 JavaScript，就也会用 JSX。
|
||||
|
||||
所以这也是 React 的“模板语言”区别于 Angluar 和 Vue 的地方，JSX不是一个新的概念，而只是原生 JavaScript 的另一种写法。但是换成这种写法，就会大大降低你上手 React 的难度。
|
||||
|
||||
# 使用脚手架工具创建 React 应用
|
||||
|
||||
经过刚才的学习，我们已经对 React 有了一个基本的了解，那么现在我们就来创建一个应用，试用一下React。
|
||||
|
||||
在实际的项目开发中，我们其实不仅需要把 React 作为UI层，还可能需要路由管理、状态管理等框架。与此同时，我们还需要使用最新的 JavaScript 语言特性、CSS 的预处理框架等等。所以一般需要结合Webpack 等打包工具来使用React。
|
||||
|
||||
完成这些配置本身就是一个比较繁琐的步骤，因此我们通常都不会从头开始创建一个项目，而是使用**脚手架工具**来创建一个项目。我在这里跟你介绍两个工具：
|
||||
|
||||
- 一个是 codesandbox.io，主要用于学习React，能够快速试验一些React的特性。
|
||||
- 另一个则是Facebook 官方提供的 create-react-app 命令行工具，用来创建一个基础的 React 项目。
|
||||
|
||||
首先看 Codesandbox，它是一个在线的工具，可以通过 [https://codesandbox.io](https://codesandbox.io) 访问使用。例如今天这节课所有可运行的示例代码就都是放在 Codesandbox 上的，用浏览器打开即可。你可以在线写代码，并实时查看运行的效果。使用起来其实也非常简单，打开主页后就可以看到如下页面：
|
||||
|
||||
<img src="https://static001.geekbang.org/resource/image/cf/e0/cff27cd3585d44cfe6d789405419a1e0.png" alt="">
|
||||
|
||||
点击 Create Sandbox，就可以创建一个前端的应用。需要说明的是，它不仅支持 React，还能够创建 Angular、Vue 等前端框架的应用。
|
||||
|
||||
第二个 create-react-app 则是我们做正式项目开发时会使用的基本工具。它会提供一个完善的 Webpack 配置，让我们能够立刻开始使用 React、JavaScript 语言的最新特性和 CSS Module 等主流的技术方案。
|
||||
|
||||
这里要特别注意一点，create-react-app的使用需要 Node.js 的环境，具体版本是 Node >= 10.16 版本以及 npm >=5.6 版本。安装好 Node.js 之后，你就可以用如下命令行来创建一个 React 应用：
|
||||
|
||||
```
|
||||
npx create-react-app my-app
|
||||
cd my-app
|
||||
npm start
|
||||
|
||||
```
|
||||
|
||||
创建的项目结构非常简单：
|
||||
|
||||
```
|
||||
- public
|
||||
- src
|
||||
- App.css
|
||||
- App.js
|
||||
- index.js
|
||||
- index.css
|
||||
- package.json
|
||||
|
||||
```
|
||||
|
||||
这里的 src/index.js 是程序的入口，App.js 则是整个应用程序的根组件，主要做一些配置的事情。create-react-app 创建的项目作为一个基本的模板，为我们提供的便利主要是配置好开发环境、Webpack 等等，但是它不包含 Redux 或者 Router 等非必须的功能。那么基于这个模板，我们后面的几节课会在 App.js 中添加 Redux、React Router 等配置。
|
||||
|
||||
# 实战：在组件中发送请求并显示数据
|
||||
|
||||
好了，我们已经对 React 有了一个大概的了解，并能够创建项目，试验代码执行的效果。现在我们来通过一个异步请求的例子，以强化对 React 的理解，这个例子也是日常开发中最为常见的需求。
|
||||
|
||||
设想这样一个场景：页面上有一个按钮，点击后，我们可以发起一个请求获取一个用户列表，并要求显示在页面上。在这个过程中，我们需要考虑数据状态，Loading 的状态，以及请求出错的处理。那么可以用下面的代码实现：
|
||||
|
||||
```
|
||||
import React from "react";
|
||||
|
||||
export default function UserList() {
|
||||
// 使用三个 state 分别保存用户列表，loading 状态和错误状态
|
||||
const [users, setUsers] = React.useState([]);
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
const [error, setError] = React.useState(null);
|
||||
|
||||
// 定义获取用户的回调函数
|
||||
const fetchUsers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("https://reqres.in/api/users/");
|
||||
const json = await res.json();
|
||||
// 请求成功后将用户数据放入 state
|
||||
setUsers(json.data);
|
||||
} catch (err) {
|
||||
// 请求失败将错误状态放入 state
|
||||
setError(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="user-list">
|
||||
<button onClick={fetchUsers} disabled={loading}>
|
||||
{loading ? "Loading..." : "Show Users"}
|
||||
</button>
|
||||
{error &&
|
||||
<div style={{ color: "red" }}>Failed: {String(error)}</div>
|
||||
}
|
||||
<br />
|
||||
<ul>
|
||||
{users.length > 0 &&
|
||||
users.map((user) => {
|
||||
return <li key={user.id}>{user.first_name}</li>;
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
程序的运行结果如下图所示：
|
||||
|
||||
<img src="https://static001.geekbang.org/resource/image/63/7c/637339ce773a45398a097ec19176647c.png" alt="">
|
||||
|
||||
当点击 Show Users 按钮时，会显示 Loading 的文本，并将 button 设为 disabled。请求成功后，则显示获取的用户列表。如果请求失败，则显示一段错误信息的文本。
|
||||
|
||||
在 React 组件中，任何一个 state 发生变化时，整个函数组件其实是被完全执行一遍的，而且除了 state，多次的执行之间没有任何关系。所以在考虑这样一个场景的实现时，我们的思考方式就是要首先考虑这个组件有哪些状态（state），这些状态的变化是由什么触发的，从而将整个功能串联起来。
|
||||
|
||||
当然，这个例子只是一个最简单的实现，但如果你细究一下，应该还会提出下面的问题：
|
||||
|
||||
1. 函数中定义了回调函数 fetchUsers，但函数每次都是全部重新执行，那会不会重复定义很多次呢？
|
||||
1. 如果另外一个组件可能也需要使用到 Users 这个数据，比如一个下拉框，那么是不是每次都要重复这个发起请求的逻辑呢？
|
||||
|
||||
这其实正是后面的课程会解决的问题，我在这里先简单回答下：
|
||||
|
||||
1. 是的，这种写法会重复定义很多函数。不过为了避免这样的问题，React 提供了 useCallback 这样一个Hook来缓存回调函数，关于这一问题，我在第4讲会有详细的讲解。
|
||||
1. 对于异步请求逻辑的重用，这其实也意味着跨组件状态的重用，我会在第7讲利用 Redux 这样一个全局状态管理框架来实现异步逻辑的复用。
|
||||
|
||||
# 小结
|
||||
|
||||
React 本身其实是一个上手非常简单的 UI 框架，它的核心 API 在这节课我们基本都已经用到了，比如函数组件，JSX，useState，等等。但是 React 本身毕竟只是解决了UI的问题，在真正开发时，我们还需要路由、需要状态管理等等，这也正是后续课程中会介绍的。
|
||||
|
||||
不过也正是因为 React 本身的这种纯粹和简单，让它的整个生态圈变得非常繁荣。针对每一个具体的问题，可能都存在特定的解决方案。所以在实际使用中，我们需要根据具体的需求，来寻求最合适的方案。
|
||||
|
||||
最后，我把这节课用到的例子链接放在这里，供你参考。
|
||||
|
||||
计数器的例子：[https://codesandbox.io/s/admiring-christian-20vzg?file=/src/01/Counter.js](https://codesandbox.io/s/admiring-christian-20vzg?file=/src/01/Counter.js)
|
||||
|
||||
异步请求的例子： [https://codesandbox.io/s/admiring-christian-20vzg?file=/src/01/UserList.js](https://codesandbox.io/s/admiring-christian-20vzg?file=/src/01/UserList.js)
|
||||
|
||||
# 思考题
|
||||
|
||||
作为第一讲的思考题，我先来提一个开放式的问题。在你看来，React 最打动你的特性是什么？或者说你认为它的最大优点有哪些？
|
||||
|
||||
欢迎在留言区写下你的思考和想法，我们一起交流讨论。如果今天的内容让你有所收获，也欢迎你把课程分享给你的同事、朋友，我们一起共同进步！
|
||||
@@ -0,0 +1,111 @@
|
||||
<audio id="audio" title="开篇词 | 全面拥抱 Hooks，掌握最新 React 开发方式" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/b0/f2/b06be301c320904c4ddf64046cd3e1f2.mp3"></audio>
|
||||
|
||||
你好，我是王沛。欢迎和我一起学习 React。
|
||||
|
||||
我在前端领域深耕15年了，先后工作于 IBM 和 SAP，目前在 eBay 担任中国区资深研发技术专家的职位。这期间，既做过前端框架的自研，也构建过大型前端开发的项目。
|
||||
|
||||
其实，早在上学阶段，我就对前端开发很感兴趣，研二时就出版了当时国内第一本专门讲 Web 2.0 的书籍：《征服 Web 2.0: Ajax 开发技术详解》。之后的工作也一直专注于前端框架的开发。可以说，我经历了前端的整个发展历史，也深知前端开发的各种痛点、难点，并见证了它们是如何被一个个出现的框架和工具不断攻破的。
|
||||
|
||||
而在前端不断推陈出新的技术中，React 的出现让我眼前一亮，它解决了很多前端开发的本质性问题，如数据流、状态维护等，于是我也开始将React应用在自己的项目中。经过数十个大型项目的实操，我把自己对 React 的一些可重用的经验，做成了开源项目，比如 Rekit、React Form Builder 等，在 GitHub 上有超过 5000 个 Star。
|
||||
|
||||
同时，作为国内最早一批的 React 实践者，我也不断将自己使用 React 的经验，通过InfoQ 专栏、QCon 演讲和诸多同行分享，推动了 React 在国内的普及；每年也都会在公司内部开设培训课程，帮助各个团队迅速掌握 React 的常见设计模式和最佳实践。
|
||||
|
||||
随着对React 的深入研究、实战操作、案例积累，以及输出分享，我拥有了一套从核心原理到实战的 React Hooks 知识总结。所以这一次，我想把我多年积累的经验分享给你。
|
||||
|
||||
# React，前端开发的正确打开方式
|
||||
|
||||
和其他技术一样，前端开发技术在不断地更迭变幻。正因如此，面对某个新技术时，我一直抱着非常谨慎的态度。
|
||||
|
||||
但是 React 的出现，让我感觉这才是前端开发的正确打开方式。这主要是因为**在当时它有两个非常颠覆式的创新点**。
|
||||
|
||||
第一个是**推出了虚拟DOM机制**，大幅度降低了UI上的操作难度。
|
||||
|
||||
React 会自动用最优的方式将虚拟 DOM 更新到真实的 DOM 节点，这样一来，我们就不需要再使用浏览器 API 来维护复杂的 DOM 结构了，这就简化了我们在 UI 上的操作。
|
||||
|
||||
第二个是**JSX语法的使用**，不仅使代码前所未有的简洁和直观，同时也减轻了内部沟通成本，提高了维护效率。
|
||||
|
||||
React用类似 HTML 标记的方式去实现组件化，数据变化以后，UI也会自动变化，我们再也不用去关注实现细节了，而且保证了UI的一致性。
|
||||
|
||||
这两个机制完美地解决了当时前端开发的痛点：模板语言不够灵活，DOM API 又太繁琐，且难以维护。因此， React 在2013年首次宣布以后，就迅速获得了大家的认可，成为了最为流行的前端框架。
|
||||
|
||||
从下面这张图也可以看到，React 自诞生以来，下载量就处于一直上升的趋势。这在前端轮子倍出的背景之下，可以说是一个不俗的成绩了。
|
||||
|
||||
<img src="https://static001.geekbang.org/resource/image/b5/26/b5b82bf59bde07e4300ddc1aaefeyy26.png" alt="">
|
||||
|
||||
值得注意的是，在其他前端框架发生翻天覆地变化的同时，React 的 API 则非常稳定。所以在我看来，无论你是**专职从事前端开发，还是以后端为主，但也需要自己做一些 UI 界面，React 作为目前最为流行的前端框架，基本上都是你的首要选择。**
|
||||
|
||||
但即便在这样稳定的背景下，React 还是在2019年2月发布的 16.8 版本中引入了 Hooks 概念。在让人耳目一新的同时，也让广大早就恐惧于各种新轮子的前端同学心头一紧，产生本能的抗拒：
|
||||
|
||||
- Class 组件不是挺好的吗，为什么又要学一个新轮子？
|
||||
- Hooks 刚出来一两年，会不会昙花一现？
|
||||
- 现在项目代码都是 Class 的，难道都得改一遍吗？
|
||||
|
||||
我先给你吃一颗定心丸，这种担忧完全没有必要，这不仅不会增加你的使用难度，反而还**会拓展你的React开发思路，为你提供了一种更多的选择**。
|
||||
|
||||
# 全面拥抱React Hooks，让前端代码结构更加清晰
|
||||
|
||||
事实上，在Hooks刚出来时，我带领的团队中也有很多同学对 Hooks 产生了抗拒心理。这很正常，毕竟，我们初次使用任何新技术时大都会有怀疑心理，或者是畏惧。正如你第一次走一条不熟悉的路时，总会觉得前路漫漫，有点儿迷茫。
|
||||
|
||||
即便如此，出于对 React 官方团队的信赖，我们还是决定开始尝试。惊喜之处就在于，在我们不断了解和使用之后，逐渐发现 Hooks 真是太好用了。原来很复杂的一些问题，现在用 Hooks 就可以很优雅地解决！
|
||||
|
||||
举个例子来说。在 Hooks 出现之前，**业务逻辑的重用**可以说是 React 开发的一大痛点和难点。比如，你需要在组件中去监听窗口大小的变化，以便在布局上做调整。那么我们就得在类组件的不同生命周期中做事件监听的绑定和解绑。
|
||||
|
||||
其中的困难和复杂可想而知，毕竟，这种需要分散在不同方法中的逻辑是很难去重用的。因此，我们不得不借助高阶组件这样复杂而又晦涩的设计模式来解决。
|
||||
|
||||
但现在呢，有了Hooks，我们就能很轻松地应对了。我们用 Hooks 就可以非常自然地去解决。我们只需要通过 Hooks 的方式进行封装，将其变成一个可绑定的数据源。这样当窗口大小发生变化时，Hook 的组件会自动重新渲染。同时，代码也更加易懂，并且不会产生额外的组件节点。
|
||||
|
||||
可以说，引入 Hooks 的概念之后，函数组件就具备了状态管理、生命周期管理等能力，**几乎可以实现原来的 Class 组件具有的所有能力**。函数组件能和已有 Class 组件无缝衔接，一起工作。这样老的代码无需做任何改变，新的代码可以根据具体情况采用 Hooks 的方式去实现。这些都大大加速了 Hooks 的普及。
|
||||
|
||||
而且，函数组件结合 Hooks 带来的**简洁的写法，<strong>以及**直观的逻辑重用能力</strong>，让函数组件成为了 React 中的一等公民。**目前，在整个 React 生态中，几乎所有开发项目都已经是围绕着 Hooks 展开的了**。
|
||||
|
||||
所以，在这次课程中，我会**从函数组件和 Hooks 的角度出发，带你重新认识 React**，帮助你在深入理解 Hooks 的基础上，使用 Hooks 的思想去开发前端应用，真正享受 Hooks 带来的诸多好处。
|
||||
|
||||
不过，对于初次接触 Hooks 的同学来说，肯定会经常遇到各种问题。比如：
|
||||
|
||||
- 为什么编译又不过了？
|
||||
- 我的函数组件怎么又死循环了？
|
||||
- Redux 的 Store 要怎么访问？
|
||||
|
||||
有这些问题是很正常的，因为**从 Class 组件到函数组件的转变，不仅仅是一个写法的区别，更是整个开发思路的转变。而我们只有学会用 Hooks 的角度去思考问题，才算把这条路真正走顺。**
|
||||
|
||||
那么，在这个课程里面，我会将我在使用 Hooks 的过程中，以及作为面试官在面试的过程中遇到的、看到的各种痛难点问题，以及最需要理解的核心原理呈现出来，帮助你把路走顺，且少走弯路，快速掌握并使用 React Hooks 思想进行前端开发。
|
||||
|
||||
# 想用好React，你该这么学
|
||||
|
||||
现在，你一定觉得Hooks简直太神奇了，迫不及待地想要学习。别急，深入技术点之前，你得知道科学的学习路径。
|
||||
|
||||
对于 React Hooks 而言，在我看来最重要的是准确地知道 Hooks 的功能边界，也就是知道它能做什么。否则，就有可能陷入什么功能都想用 Hooks 去做的，或者是在最适合使用 Hooks 的功能中，却想不到用它去处理。
|
||||
|
||||
在建立起对Hook的全局认知之后，就要掌握**核心概念和原理**了。任何技术，脱离了原理本身，学到的大概率只是皮毛。原理或许不能让你即学即用，但这却是你**应对实际复杂业务问题的关键能力**。
|
||||
|
||||
当然，**把原理和实际业务场景结合起来**，才能让自己在 Hooks 进阶这条路上走得更快、更稳。所以，你就必须清楚日常开发中的具体场景，在真实的场景中透彻理解Hooks 是如何解决问题的。而我们最高阶的目标，就是让你**在实战中掌握Hooks的思考方式，拥有举一反三的能力**。
|
||||
|
||||
刚刚说的这些，其实也正是咱们这个课程的核心设计理念。据此，我把学习这门课的路径画成了一张图，你可以对照着来学习。
|
||||
|
||||
<img src="https://static001.geekbang.org/resource/image/a4/93/a4089b1acf12d52575ebfc89dd6b7593.png" alt="">
|
||||
|
||||
## 课程是如何设计的？
|
||||
|
||||
接下来，我就说说这门课具体是怎么设计的。整个课程会分为三个部分。
|
||||
|
||||
**基础篇：抓住问题本质，提高解决复杂问题的能力**
|
||||
|
||||
刚才我们讲到，原理的学习是必要且重要的，那么，为了让你快速消化吸收这些原理，学得有趣，我也做了一些精心的小设计。
|
||||
|
||||
在“基础篇”，我会抽丝剥茧，从“问题的本质是什么”这一角度出发来讲解每个机制，包括：React 为什么要发明 Hooks？useEffect 就是生命周期函数吗？等等。理解了最核心的那个问题，你也就拥有了举一反三的能力。
|
||||
|
||||
**实战篇：业务场景驱动，掌握解决实际问题的思考方式**
|
||||
|
||||
在理解核心概念的基础之上，我们就拥有了解决问题的抓手，接下来，我会带你进入实战部分。
|
||||
|
||||
在这里，我精心设计了9个不同的典型业务场景，并基于 React Hooks 去剖析一些常见设计模式。相信通过实战锻炼，你会快速掌握这些通用原则和最佳实践，形成自己的知识库。在遇见类似的场景时，可以灵活调取。
|
||||
|
||||
**扩展篇：了解工具、生态和未来，开拓你的技术视野**
|
||||
|
||||
我们学习Hooks，是为了更好地使用React，因此，在最后一个模块，我们必须要将视角扩展至React的整个生态。
|
||||
|
||||
我会给你介绍 React 应用该如何打包，整个生态有哪些可用的工具和资源，该如何测试，以及未来会有哪些发展的趋势。有了完整体系的积累，你才能真正独当一面，完成整个应用的开发、测试、打包和部署。
|
||||
|
||||
最后，希望这门从函数组件角度出发的 React Hooks 课程，不仅能够帮助你全面掌握 React 的开发技能，同时也能够给你一个很好的进阶起点，让你在 React 的开发路程上更加高效地前进。
|
||||
|
||||
当然，如果你在学习过程中有任何问题或者心得，也欢迎在留言区和我交流互动，我们一定可以共同进步。
|
||||
Reference in New Issue
Block a user