React 18.2.0入门教程（二）

最新推荐文章于 2024-04-12 10:15:50 发布

__illusion

最新推荐文章于 2024-04-12 10:15:50 发布

阅读量400

点赞数

分类专栏： React技术栈文章标签： javascript 前端 react Powered by 金山文档

本文链接：https://blog.csdn.net/Advanced_C/article/details/129327711

版权

React技术栈专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言

在工程化项目里，我们一般不会直接引入脚本文件，主要原因是后续开发新功能容易耦合在一个页面内，当多个页面开发时，每一个页面都需要引入一次，既不方便管理和维护也容易产生代码冗余，降低运行效率。因此，react提供了react脚手架来帮助我们解决这个问题

Create React App

Create React App命令会为你创建一个新的react App，同时它也会配置好你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 14.0.0 和 npm >= 5.6。要创建项目，请执行：

npx create-react-app my-app    // my-app 为自定义项目名
cd my-app    // 需要进入创建好的项目文件夹中
npm start    // 启动项目

注意
第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

这里官方使用npx命令是为了简单直接，以便于初学者快速创建一个react应用。npx的作用在于可以直接在任意目录下执行包内的命令。举个例子，如果我们想要在项目中使用typescript，那么通常情况下需要使用npm / yarn 全局安装typescript的脚本包，因为当你需要使用tsc命令编译ts文件时，如果不是全局安装而使用的情况下的话cmd会报：”不是内部或外部命令，也不是可执行的程序或批处理文件“的错误，因为全局环境下确实找不到相关命令

Hello World

进行到了这一步后，我们就可以随心所欲来构建我们的react应用了。当然，最开始的还要属最经典的hello world 程序，可以帮助我们了解到一个最基本的react应用的基本编写方式

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

找到脚手架生成的index.js文件，将root.render函数内的内容改为hello word 就可以了。注意，App.js是react应用中的主组件，类似于vue中的App.vue，index.js则是react中的入口文件，类似于vue中的main.js

在index.js 文件中应该会看到一个名为React.StrictMode的标签包括着App组件。意为被该标签包括着的组件会开启严格模式，StrictMode 目前有助于：

识别不安全的生命周期

关于使用过时字符串 ref API 的警告

关于使用废弃的 findDOMNode 方法的警告

检测意外的副作用

检测过时的 context API

确保可复用的状态

还有一个新加入的名称是reportWebVitals，这个是用于采集当前react应用的性能的一个文件，其中也会导出一个同名函数用于执行内部收集的函数，大多数情况下可以忽略

因为目前我们暂不涉及自定义组件或其它高阶用法，因此，可以先把App.js和index.js的内容全部删掉，然后自己来编写新的代码，这样做有利于提高我们的实践能力

元素渲染

之前我们已经提到过，jsx可以看作是去掉了反引号的模板字符串，当然，具体语法还是会有些许差别的。那么，jsx自然也可以做到模板字符串能够做到的事情，比如嵌入js变量或表达式。以下是react官方的示例代码

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

注：在脚手架的public目录内的index.html内有id名为root的div元素，后续的内容其实都是在这个页面内修改而成的，因此，react和vue一样都是单页面应用

这个例子会在 setInterval() 回调函数，每秒都调用 root.render()

可能你会担心这样频繁更新页面太耗费性能了，其实这完全不用担心，React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点
根据我们的经验，应该专注于 UI 在任意给定时刻的状态，而不是一视同仁地随着时间修改整个界面

组件 & Props

在React 18.2.0入门教程（一）中我们曾涉及过一点组件的知识，但是不多。在这节，我们将在脚手架内实际编写一个组件，并逐渐熟悉其工作方式，以下是react官方给出的实例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

这个实例最重要的是理解props参数，让我们来回顾一下这个例子中发生了什么：

我们调用 root.render() 函数，并传入 <Welcome name="Sara" /> 作为参数

React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入

Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值

React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>

注：所有 React 组件都必须保护它们的 props 不被更改

注意：组件名称必须以大写字母开头
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome
你可以在深入 JSX 中了解更多关于此规范的原因

分解再组合组件

当组件开发的过程中，往往随着需求增加或变更的同时，代码行数越来越多，关系和层级也越来越复杂，往往带给开发者难以释怀的开发困难。因此，建议各位开发者将不同逻辑部分的组件内容抽离出来，每一份分割成单独的小组件后，再将其组装到原来的大组件内，这种方式可以很好的提高代码的可读性和可复用性，后续无论是调试还是维护都会很方便，能够极大提高开发者的开发效率