React

创建React项目

Create-react-app

官网：https://create-react-app.bootcss.com/

## 使用 npx
npx create-react-app my-app --template typescript
## 使用 npm
npm init react-app my-app --template typescript
## 使用 yarn
yarn create react-app my-app --template typescript

项目结构

项目入口 src/App.js

Vite

官网：https://cn.vitejs.dev/

npm create vite@latest react-demo-vite --template react-ts

yarn create vite react-demo-vite --template react-ts

项目结构

项目入口 src/App.tsx

编码规范 - eslint prettier husky 等

1. 合理、规范的注释

2. 代码合理拆分

   • eslint （编码规范，如变量未定义（语法语义））

     // 安装插件
     npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev
     
     // 初始化配置文件 .eslint.js
     npx eslint --init ## 根据引导一步一步走
     
     解释： eslint plugin 与 extend的区别：
      
      1. extend 提供的是 eslint 现有规则的一系列预设
      2. plugin则提供了除预设之外的自定义规则，当你在eslint的规则里找不到合     适的规则的时候就可以借用插件来实现了
      
      注释：安装eslint就可以看到代码中未使用的变量的错误
      在package.json中增加
      scripts `"lint": " eslint 'src/**/*.+(js|ts|jsx|tsx)' "` 
      控制台运行 npm run lint 也可以看到错误提示。
      如果要自动修复，可以加 --fix参数
     

   • prettier （编码风格，如末尾是否用；）

     npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev
     
     eslint-config-prettier 禁用所以和prettier 产生冲突的规则
     eslint-plugin-prettier 把prettier应用到Eslint,配合rules"prettier/prettier":"error"实现Eslint提醒。
     在eslint配置文件的extends最后 增加 'plugin:prettier/recommended'
     在package.json中增加scripts
     `"format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "` 
     控制台运行 npm run format可以修复所以的格式错误
     

   • eslint 也有编码风格的功能，连着可能会有冲突

​

Vite 和 webpack区别

Create React App 是使用webpack作为打包工具，和vite是竞品

区别

vite 启动速度更快，使用ES Module语法，开发环境节省打包的过程

CRA或webpack使用者更多，时间更久，插件更丰富

JSX语法

标签

首字母小写 - HTML 标签

首字母大写 - 自定义组件

可以像HTML一样嵌套

标签必须闭合

每一段jsx只能有一个根节点，或者使用<> </> （Fragment）

属性

和HTML属性基本一样，但有些和JS关键字冲突了

class 要改为 className

style 要写成js对象（string），key采用驼峰写法

for 要改成 htmlFor

事件

onXxx的形式

function clickHandler(event: React.MouseEvent<HTMLParagraphElement>){
    event.preventDefault()
    console.log('clicked')
}
return <p onClick={clickHandler}>hello world</p>

import React, { FC, MouseEvent } from 'react'
// 代码解析
/*
 FC：(Function Component)
 在TypeScript结合React开发时，React.FC(或React.FunctionComponent)是一个泛型，它用于定义函数组件的类型。
 这个类型定义了函数组件的结构和预期行为，并且提供了泛型支持，以便你可以指定组件props的类型
*/
// 例 定义Props类型 通过泛型参数，React.FC允许你指定props的类型
type MyComponentProps = {
  message: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ message }) => {
  return <div>{message}</div>;
};

const MyComponent: React.FC = ({ message:string }) => {
  return <div>{message}</div>;
};

// 通过type类型 props定义，更有利于维护和可读性

js表达式

{xxx}格式表示一个JS变量或表达式，可用于

• 普通文本内容，或判断、循环
• 属性值
• 用于注释

判断

运算符 &&

三元运算符 a ？b：c

用函数封装

const flag = true
return <div>
    {flag && <p>hello</p>}
    {flag ? <p>你好</p> : <p>再见</p>}
</div>


// 函数封装

function Hello() {
    if (flag) return <p>你好</p>
    else return <p>再见</p>
}
return <Hello></Hello>

循环

  const list = [
    { username: 'zhangsan', name: '张三' },
    { username: 'lisi', name: '李四' },
    { username: 'shuangyue', name: '双越' },
  ]

  const ul = <ul>
    {list.map(user => {
        return <li key={user.username}>{user.name}</li>
    })}
  </ul>

JSX循环必须有key-帮助React识别那些元素改变了,比如被添加或删除。

同级别key必须唯一

key是不可改变的 尽量不要用index，要用业务ID

key用于优化 VOM dIff算法

显示HTML代码

JSX 防止注入攻击，用 `dangerouslySetInnerHTML={{ __html: 'xxx' }}`
const rawHtml = '<script>alert("This could be malicious!");</script>';
const MyComponent = () => (
  <div dangerouslySetInnerHTML={{ __html: rawHtml }} />
);