React组件实战笔记 | 青训营笔记

63 阅读3分钟

组件是用React编写客户端应用的基本单元。使用者肯定会创建很多组件!在本章中,我们将引导亲自动手用组件构建一个简单的评论框并走马观花地过一下React。但首先,让我们花点时间来探索一下“组件化思维”,看看它将如何造就评论框。在本书的大部分内容中,我们通常会直接深入代码中,而不会花太多时间对事情进行规划,但就第一次涉足React而言,我们将做一些规划来确保我们的思维方式是对的

1683681203128.png

我们将如何开始创建这个页面呢?让我们先了解一下应用所需要的数据,然后看看如何将其转换为组件。如何将原型转换为组件?我们完全可以在对React一无所知的情况下一头扎下去,并开始尝试创建组件,但如果不了解它们的工作机制或者它们的用途,最终可能会创建出一团糟或不合乎React的东西。我们将在接下来的几节中做一些规划,以便对如何构造和设计评论框有更深的理解。

人们可能在工作或学习中经常听到API这个术语。如果已经很熟悉这个概念,随意跳过这个部分。如果还不熟悉,那么这个部分可能有所帮助。API是什么?API或者应用编程接口是一组构建软件的例程和协议。这听起来可能很含糊,而且这是一个相当笼统的定义。API是一个宽泛的术语,适用于从公司平台到开源库的所有东西。

在Web开发和工程中,API几乎已经成为基于Web的远程公共API的同义词。这意味着API通常是一种向外部暴露程序或平台交互方式的清晰的办法,通常通过互联网,供人们使用和消费。这样的例子非常多,但两个最广为人知的是Facebook和Stripe的API,它们提供了一组通过Web与其程序和数据进行交互的方法。

Letters公司(我们虚构的公司)的后端团队已经创建了这样的API供人使用。基于Web的API有许多不同的形式和种类,在本书中使用的这个API是一个REST风格的JSON API。这意味着服务器会返回JSON格式的数据而且可用的数据是围绕着像users、posts、comments等这样的资源进行组织的。REST风格的JSON API是远程API的常见形式

`{

"id": 123, ⇽--- 这个没有在原型中出现,但这并不代表不需要这项数据

"content": "What we hope ever to do with ease, we must first learn to do with diligence. — Samuel Johnson",

"user": { "name": "Mark Thomas", "id": 1 },

"comments": [{ ⇽--- 接收到一组评论对象

"id": 0, ⇽--- 评论也有ID

"user": "David",

"content": "too. mainstream."

}, {

"id": 1,

"user": "Peter",

"content": "Who was Samuel Johnson?" }, {

"id": 2,

"user": "Mitchell",

"content": "@Peter get off Letters and do your homework!" }, {

"id": 3,

"user": "Peter",

"content": "@mitchell ok dad :P" }] `