乐趣区

关于react.js:React-18TS的根本概念

jiezi

React 18+TS 的基本概念

TypeScript

TypeScript是一种动态类型的编程语言，它可能在编译时查看代码中的类型谬误，从而提高代码的可读性和可维护性 1。TypeScript还支 持 ES6+的新个性，如类，模块，箭头函数，解构赋值等，使得代码更加简洁和现代化 1。

TypeScript可能与 React 框架无缝集成，只需要安装相应的类型定义文件即可。例如，要使用 React 18+TS 开发利用，可能执行以下命令：

npm install --save react@next react-dom@next
npm install --save-dev typescript @types/react @types/react-dom

这样就可能在 .ts 或.tsx 文件中使用 React 和 TypeScript 了。

React 18

React 18是 React 框架的最新版本，它蕴含了一些重大的更新和改进 2。其中最引人瞩目的是Server Components，它可能让开发者在服务器端渲染组件，并将后果发送给客户端 3。这样可能缩小客户端的代码量和网络传输量，提高利用的加载速度和响应速度 3。

另一个重要的个性是Suspense，它可能让开发者在组件中申明数据依赖，并在数据加载时浮现一个占位符 4。这样可能避免组件在渲染过程中出现闪动或空白的情况，提高用户体验 4。

还有一个值得关注的个性是 Concurrent Rendering，它可能让React 在后盾渲染更新，并在合适的时机浮现给用户 5。这样可能避免长时间的渲染工作阻塞用户交互，提高利用的流畅度和稳定性 5。

要使用 React 18+TS 开发利用，需要配置一些实验性的个性。例如，在 tsconfig.json 文件中增加以下内容：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "experimentalDecorators": true,
    "useDefineForClassFields": true
  }
}

这样就可能在.tsx 文件中使用 JSX 语法，并启用装璜器和类字段等个性了。

React 18+TS 的劣势

使用 React 18+TS 开发前端利用有以下几个劣势：

可能利用 TypeScript 的类型零碎和 ES6+ 的新个性，编写更加健壮、简洁和现代化的代码。
可能利用 React 18 的新个性，如 Server Components, Suspense, Concurrent Rendering 等，提高利用的性能和用户体验。
可能享受 React 生态系统中丰富的资源和工具，如 Create React App, Next.js, React Router, Redux, Material UI等，疾速搭建和部署利用。

React 18+TS 在线教育平台示例

为了展示如何使用 React 18+TS 构建一个在线教育平台，简略实现一个前端页面，浮现课程列表和课程详情。

首先，咱们需要创建一个 React 18+TS 我的项目，可能使用 Create React App 工具，执行以下命令：

npx create-react-app react18-ts-edu --template typescript
cd react18-ts-edu
npm start

这样就可能在阅读器中看到一个默认的页面了。

接下来，咱们需要安装一些依赖库，如 GraphQL, Apollo Client, Material UI 等，执行以下命令：

npm install graphql @apollo/client @material-ui/core @material-ui/icons

而后，咱们需要配置 Apollo Client，用于与后端的 GraphQL 接口通信。在 src 目录下创建一个apollo.ts 文件，增加以下内容：

import {ApolloClient, InMemoryCache} from "@apollo/client";

// 创建一个 Apollo Client 实例
const client = new ApolloClient({
  // 指定后端的 GraphQL 接口地址
  uri: "http://localhost:3000/graphql",
  // 创建一个内存缓存对象
  cache: new InMemoryCache(),});

// 导出 client 对象
export default client;

接着，咱们需要修改 src/index.tsx 文件，使用 ApolloProvider 组件包裹 App 组件，将 client 对象传送给子组件。修改后的文件内容如下：

import React from "react";
import ReactDOM from "react-dom";
import {ApolloProvider} from "@apollo/client";
import client from "./apollo";
import App from "./App";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    // 使用 ApolloProvider 组件包裹 App 组件
   
     
   
  ,
  document.getElementById("root")
);

接下来，咱们需要创建一个 CourseList 组件，用于浮现课程列表。在 src 目录下创建一个 components 文件夹，并在其中创建一个 CourseList.tsx 文件，增加以下内容：

import React, {useState} from "react";
import {useQuery, gql} from "@apollo/client";
import {
  Grid,
  Card,
  CardActionArea,
  CardMedia,
  CardContent,
  Typography,
  CardActions,
  Button,
} from "@material-ui/core";

// 定义一个 GraphQL 查问语句，用于获取课程列表
const COURSES_QUERY = gql`
  query {
    courses {
      id
      title
      cover
      price
      rating
    }
  }
`;

// 定义一个课程类型的接口，用于描述课程的属性
interface Course {
  id: string;
  title: string;
  cover: string;
  price: number;
  rating: number;
}

// 定义一个 CourseList 组件的函数，接收一个 onSelect 属性，用于传送选中的课程 ID
const CourseList: React.FC<{onSelect: (id: string) => void }> = ({onSelect,}) => {
  // 使用 useQuery 钩子函数，传入查问语句，获取查问后果
  const {loading, error, data} = useQuery(COURSES_QUERY);

  // 如果查问正在加载中，返回一个提示信息
  if (loading) return
Loading...

;
  // 如果查问出错了，返回一个错误信息
  if (error) return
Error :(

;

  // 如果查问胜利了，返回一个网格布局的课程列表
  return ({data.courses.map((course: Course) => (<CardActionArea onClick={() => onSelect(course.id)}>
              <CardMedia
                component="img"
                alt={course.title}
                height="140"
                image={course.cover}
                title={course.title}
              />
             
               
                  {course.title}
               
               
                  {` 价格：${course.price}元 `}
               
               
                  {` 评分：${course.rating}`}
               
              </CardContent
退出移动版