首页手记【学习打卡】第2天理解React概念

【学习打卡】第2天理解React概念

标签：

Html5 Typescript

【学习打卡】第2天理解React概念

课程名称：[React 17/18 系统精讲结合TS打造旅游电商平台]

课程章节：概念理解/配置React的CSS模组/创建class类组件

主讲老师：阿莱克斯

课程内容：

简述React的前世今生
初识React函数式组件
配置React的CSS模组
学习React类组件

课程收获：

React的设计理念

单向数据流
- 数据与界面绑定

单向渲染
- 类似函数同输入同输出
虚拟DOM
- state change => compute diff => render
- ast
组件化
- 一个项目由独立的组件自由组合搭建完成

利用create-react-app脚手架搭建robot入门项目
```
npx create-react-app robot --template typescript
```
为什么使用JSX
- React并不强制使用JSX
- React认为视图的本质就是渲染逻与UI视图的统一
- React将HTML与渲染逻辑进行了耦合，形成了JSX
- 使用小驼峰进行命名
- 自定义属性，以data-开头
- ```
const element = <div data-abc={'abc'}></div>
```
- JSX中嵌入表达式
```
const name = 'hello'
const element = <h1>{hello}</h1>
ReactDOM.render(element)
```

CSS module

import style from '/App.css'

配置TS识别css文件

declare module '*.css' {
  const css: {[key: string]:string}
}

将css重名为.module.css

css in js 理念

传统方式直接引入整个css

import '/index.css' <div className='app' />

JSS模块化

import style from './index.css'
<div className={style.app} />

使用插件助力JSS提示

npm install typescript-plugin-css-modules --save-dev

基于Vue改写DEMO

vue

<script setup lang="ts">
import robots from '@/mock/robots.json'
import { ref } from 'vue'
interface robotProps {
  id: number;
  name: string;
  email: string;
}
const robotsRef = ref<robotProps[]>(robots)
</script>
<template>
  <ul v-for="(item, index) in robotsRef" :key="index">
    <li>
      <img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="`https://robohash.org/${item.id}`" alt="robot">
      <h2>{{item.name}}</h2>
      <p>{{item.email}}</p>
    </li>
  </ul>
</template>
<style scoped></style>

react

import React from "react";
interface robotProps {
  id: number;
  name: string;
  email: string;
}
// FC： functional component 函数式组件
const robot: React.FC<robotProps> = ({ id, name, email }) => {
  return (
    <li>
      <img alt="robot" src={`https://robohash.org/${id}`} />
      <h2>{name}</h2>
      <p>{email}</p>
    </li>
  );
};
export default robot;