当前位置：首页 > article >正文

【React】入门Day01 —— 从基础概念到实战应用

article 2024/10/2 5:14:32

一、React 概述

二、开发环境创建

三、JSX 基础

四、React 的事件绑定

五、React 组件基础使用

六、组件状态管理 - useState

七、组件的基础样式处理

React 是什么
- 由 Meta 公司开发，是用于构建 Web 和原生交互界面的库。
React 的优势
- 相较于传统基于 DOM 开发：
  - 采用组件化开发方式，提高代码复用性和可维护性。
  - 性能不错，通过虚拟 DOM 等机制提高渲染效率。
- 相较于其它前端框架：
  - 拥有丰富的生态系统，有大量的第三方库和工具。
  - 支持跨平台开发，可以用于 Web、移动端（React Native）等。
React 的市场情况
- 全球流行，被大厂广泛使用。

create-react-app 工具
- 是快速创建 React 开发环境的工具，底层由 Webpack 构建，封装了配置细节，开箱即用。
- 使用命令
```
npx create-react-app [项目名称]
```
  创建项目，例如
```
npx create-react-app react-basic
```
  其中npx是 Node.js 工具命令，create-react-app是核心包，react-basic是项目名称可自定义

什么是 JSX
- 是 JavaScript 和 XMl (HTML) 的缩写，在 JS 代码中编写 HTML 模版结构，是 React 中构建 UI 的方式。
- 优势：
  - 具有 HTML 的声明式模版写法，方便构建页面结构。
  - 拥有 JavaScript 的可编程能力，可灵活处理数据和逻辑。
JSX 的本质
- 是 JS 的语法扩展，浏览器不能直接识别，需解析工具解析后才能使用。
JSX 高频场景
- JS 表达式：在 JSX 中通过{}识别 JavaScript 表达式，如变量、函数调用等，但 if 语句、switch 语句、变量声明不属于表达式不能在{}中。
- 列表渲染：使用map方法实现列表渲染，如
```
{list.map(item=><li key={item.id}>{item}</li>)}
```
- 条件渲染：通过逻辑与运算符 &&、三元表达式 (?:) 实现基础条件渲染，也可通过自定义函数 + 判断语句实现复杂条件渲染。

基础实现
- 通过语法on + 事件名称 = {事件处理程序}绑定事件，遵循驼峰命名法，如
```
<button onClick={clickHandler}>click me</button>
```
使用事件参数
- 在事件回调函数中设置形参 e 可获取事件对象，如
```
<button onClick={clickHandler(e)}>click me</button>
```
传递自定义参数
- 事件绑定位置改造成箭头函数写法传递实参，如
```
<button onClick={()=>clickHandler('jack')}>click me</button>
```
  注意不能直接写函数调用。
同时传递事件对象和自定义参数
- 在事件绑定位置传递事件实参 e 和自定义参数，事件处理函数中声明形参对应顺序，如
```
<button onClick={(e)=>clickHandler('jack',e)}>click me</button>
```

组件是什么
- 一个组件是用户界面的一部分，有自己的逻辑和外观，组件之间可嵌套和复用。
组件基础使用
- 在 React 中，组件是首字母大写的函数，渲染组件像使用标签一样，如定义组件
```
function Button(){return <button>click me</button>}
```
  使用组件<Button/>或<Button></Button>。

基础使用
- useState 是 React Hook，可向组件添加状态变量，状态变量变化会影响组件渲染结果（数据驱动视图），如
```
const [ count, setCount ] = React.useState(0)
```
  通过setCount函数修改状态。
状态的修改规则
- 状态被认为是只读的，应替换而不是修改，直接修改状态不能引发视图更新。
修改对象状态
- 对于对象类型状态变量，应给set方法一个全新的对象来修改。

行内样式
- 通过style属性设置行内样式，如
```
<div style={{ color:'red'}}>this is div</div>
```
class 类名控制
- 引入 CSS 文件，使用className属性应用类名，如
```
import './index.css';<span className="foo">this is span</span>
```