React 基础入门

Source: Dev.to

我的 React 学习第一步

当我开始做网页开发时，我只会 HTML、CSS 和基础的 JavaScript。我能够搭建简单的网站，但随着项目规模的扩大，我发现自己不断重复相同的代码，且难以管理所有内容。

于是我开始学习 React。起初它让人感到困惑，但慢慢地我掌握了基础，使用起来也变得更容易。

什么是 React？

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 创建。

简而言之，React 通过把页面划分为称为 组件 的小块来帮助我们构建网站。每个组件负责页面的一个部分，例如头部、底部或内容区域。

为什么使用 React？

React 让开发更简洁、更高效。

• 有助于组织代码
• 可以复用组件
• 易于更新和维护
• 提升性能

React 只会更新页面中发生变化的部分，因此比传统网站更快。

什么是可复用组件？

可复用组件意味着只写一次代码，却可以多次使用。

例如，避免这样重复代码：

Click
Click
Click

我们可以创建一个组件：

function Button() {
  return Click;
}

然后复用它：

这样代码就简洁、清晰了。

在博客中使用可复用组件

在博客里，每篇文章的结构都相似，所以我们可以创建一个组件并多次使用。

function PostCard(props) {
  return (
    
      
## {props.title}

      
{props.content}

    
  );
}

然后这样使用：

这样既省时，又避免了重复代码。

SPA 与 MPA

• SPA（单页应用） 只加载一个页面，并在不刷新页面的情况下更新内容。React 采用这种方式，体验更快。
• MPA（多页应用） 每次点击链接都会加载一个新页面，相比 SPA 较慢。

主要区别： SPA 不会重新加载页面，而 MPA 在每次导航时都会重新加载页面。

库 与 框架

• 库（Library）： 提供特定功能的工具，使用方式由我们自己控制。React 是一个库。
• 框架（Framework）： 提供完整的应用结构，控制整体流程。常见的有 Angular 和 Django。

主要区别： 使用库时我们掌控代码的执行，而使用框架时框架掌控整体流程。