React 相关知识

CRA

Create React App 使用最多的脚手架，React 官方推荐

官网 create-react-app.dev/

脚手架

脚手架的好处：傻瓜式操作，简单方便 如自己搭建，中间可能会出很多问题（版本问题 + 个人操作问题），可能会劝退很多人

创建项目

PS：直接使用 typescript

## 使用 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

使用 vite 创建项目

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

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

代码规范

高质量代码的特点

• 严格编码规范（靠工具、流程，而非自觉）
• 合理、规范的注释
• 代码合理拆分

eslint prettier 两者区别

• eslint 编码规范，如变量未定义（语法语义）
• prettier 编码风格，如末尾是否用 ;
• eslint 也有编码风格的功能，两者可能会有冲突

eslint

安装插件

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev

初始化配置文件 .eslint.js

npx eslint --init    ## 然后根据引导一步一步走

解释：eslint plugin 与 extend 的区别：

• extend 提供的是 eslint 现有规则的一系列预设
• plugin 则提供了除预设之外的自定义规则，当你在 eslint 的规则里找不到合适的的时候就可以借用插件来实现了

安装 vscode 插件 eslint ，此时就可以看到代码 App.txs 中的错误提示（如定义一个未使用的变量）

在 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'

安装 vscode 插件 prettier ，此时可以看到代码 App.txs 中的格式提示（如末尾是否使用 ; ，或单引号、双引号）

在 package.json 中增加 scripts "format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' " 控制台运行 npm run format 可以修复所有的格式错误

设置 vscode .vscode/settings.json 自动保存格式，可以在文件保存时，自动保留格式

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

增加配置文件 .prettierrc.js 规定自己的编码格式，运行 npm run format 可以看到效果，保存文件也可以看到效果。 【注意】如果此处没效果，可以重启 vscode 再重试。

---

一直搞不定，重启 vscode 就好了。 在 vscode 搜"prettier" 插件时，发现一个 "reload required" 的提示，于是就重启了

husky

git-hook

安装依赖

npm install husky -save-dev

参考文档 github.com/typicode/hu... 增加三个 pre-commit 命令

npm run lint
npm run format
git add .

可以故意制造一个错误：定义一个未使用变量（eslint 配置文件 rules 增加 'no-unused-vars': 'error',） 然后执行 git commit 试试

commit-lint

参考文档 github.com/conventiona... 安装设置即可

commit 规则查看 node_modules/@commitlint/config-conventional （在 commitlint.config.js 中有配置）

尝试 git commit -m "test" 会失败，再尝试 git commit -m "chore: commit lint" 会成功

JSX 语法

标签

• 首字母小写 - HTML tag
• 首字母大写 - 自定义组件
• 如 <input/> 和 <Input/> 就不一样

可以像 HTML 一样嵌套 JSX 里的标签必须是闭合的，<input> <br> 这样写在 JSX 会报错（在 HTML 中不会报错），必须闭合 <input/> 每一段 JSX 只能有一个根节点，或者使用 <></> （ Fragment ）

属性

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

• class 要改为 className
• style 要写成 JS 对象（不能是 string），key 采用驼峰写法
• for 要改为 htmlFor

事件

onXxx 的形式

注意 TS 的写法

function clickHandler(event: React.MouseEvent<HTMLParagraphElement>) {
    event.preventDefault()
    console.log('clicked')
}

return <p onClick={clickHandler}>hello world</p>

如果要想传递参数，可以通过如下方式

  function clickHandler(event: React.MouseEvent<HTMLParagraphElement>, x: string) {
    event.preventDefault()
    console.log('clicked', x)
  }

  return (
    <p onClick={(e: React.MouseEvent<HTMLParagraphElement>) => clickHandler(e, 'hello')}>
        hello world
    </p>
  )

PS：Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}.

JS 表达式

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

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

判断

JS 一般使用 if...else 做判断，但不能用于 JSX 的 {xxx} 中。

所以，可以选择其他方式做判断

• 运算符 &&
• 三元表达式 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>

循环

使用 map 做循环

  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 （也不要用随机数）

显示 HTML 代码

JSX 防止注入攻击，否则用 dangerouslySetInnerHTML={{ __html: 'xxx' }}

组件和 props

React 一切皆组件

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

组件可嵌套

• React 通过组件来构建 UI
• 组件拆分也有利于代码组织和维护，尤其对于大型软件
• JSX 中，组件 tag 首字母要大写