初识React

在最新写需求的时候，我遇到了一个需求，这个需求改后端改的不算多，而且也比较简单，但是在改前端的时候，很复杂。因为我们这个项目用的是React做前端的，而我对于前端知识没有了解，所以理解很多代码都很困难，更别说写了。在我们这个项目中，不仅仅用到了React这么简单，还用到了Taro， TypeScript，Taro UI，ES6+ 语法。但是我觉得一个个去学不成办法，因为这样的话学习周期太长了，而这个需求越快搞定越好。之前睿哥在教我的时候，和我说了这样一句话：“你说你这里不懂，那你为什么不把这里搞懂呢？问AI啊！”所以这次，我也是试着用一种新的方法来学习前端的知识，我选了一个index.tsx文件，遇到不懂的代码就问AI，一条一条的去理解，这样说不定是掌握前端这么多知识的一种方法。

这段代码的意思是：

首先创建一个state对象，state对象包含了多个字段，每个字段都有具体的值。

然后指定state对象的类型为PropsType，PropsType是一个预先定义的TypeScript类型，描述了state对象的结构和字段类型。

接下来，我们研究一下PropsType：

type PropsType = {loadMore: 'more' | 'noMore' | 'loading' | undefined;[key: string]: any;
};

1. loadMore 字段：

   • 必须存在，且其值必须是 'more'、'noMore'、'loading' 或 undefined 之一。

2. 索引签名 [key: string]: any;：

   • 允许对象具有任意数量的其他属性。
   • 这些属性的键（key）必须是字符串类型。
   • 这些属性的值（any）可以是任意类型。

所以总结一下这段代码：

• 创建对象：通过 state: PropsType = { ... }，你创建了一个名为 state 的对象。
• 类型约束：使用 PropsType 类型约束 state 对象，确保它至少包含 loadMore 字段，并且可以包含其他任意数量的字段。

接下来是第二段代码：

这段代码是一个生命周期方法。这段代码展示了一个典型的 React 组件在挂载时进行初始化和事件监听的过程。通过监听路由事件并处理参数，它能够动态地更新组件状态和界面显示。这种模式需要根据路由参数动态更新组件内容。

详细说明

1. componentDidMount 方法：

   • 这是 React 组件的生命周期方法，当组件被挂载到 DOM 中后会立即调用这个方法。
   • 在这里，它首先调用了 this.getBaseDefineOption() 方法，可能是用于初始化一些基础数据。

2. 监听路由事件：

   • 使用 eventCenter.on 方法监听路由的 onShow 事件。
   • 当路由的 onShow 事件被触发时，执行回调函数。

3. 处理路由参数：

   • 在回调函数中，首先获取路由参数 params。
   • 如果 params 存在，根据 params 中的 reporterId 和 realExectorId 设置导航栏标题。
   • 使用 this.setState 方法更新组件状态，包括 deviceId、deviceCode、reporterId 和 realExectorId。
   • 状态更新后，通过回调函数调用 this.getList() 方法获取列表数据。

4. 无参数处理：

   • 如果 params 不存在，直接调用 this.getList() 方法。

这段代码中有几个需要注意的点：

1、if (params.reporterId)中，params.reporterId返回的应该是true或者false，而不是一个具体的数。

2、() => {} 是 JavaScript 中的箭头函数语法。箭头函数是 ES6引入的一种更简洁的函数定义方式。关于箭头函数，最主要的应该就是，箭头函数不会创建自己的 this，它会捕获上下文的 this 值。对于需要在回调中保持 this 上下文的情况非常有用。比如这个代码，这个getList()方法就是下文的，用了this就可以在箭头函数使用了，换句话说getList()方法不是在箭头函数创建的，是从上下文拿的。

接下来看第三段代码：

1. 判断是否还有更多数据

这段代码首先检查 this.state.loadMore 是否等于 'noMore'。如果 loadMore 的值是 'noMore'，说明已经没有更多数据可以加载了，方法会立即返回，不会执行后续的代码。

2. 更新状态

this.setState 用于更新组件的状态（state）。loadMore 被设置为 'loading'，表示正在加载更多数据。更新 page 对象，将 current 页码加 1，表示要加载下一页的数据。

3. 回调函数

setState 的第二个参数是一个回调函数，在状态更新完成后执行。这个回调函数调用了 this.getList(true) 方法，传递参数 true，通常表示要追加数据到现有列表中，而不是替换现有数据。

接下来看第四段代码：

这段代码定义了一个handleLoading的函数，方便接下来被调用。其中，这里的type是这个意思：

也就是说，在后面调用的时候，你需要传一个参数（true或者false）给handleLoading，然后才能够执行handleLoading()方法。

接下来看第六段代码：

  getList = (type?) => {this.handleLoading(true);const {searchType,deviceCode,deviceId,reporterId,realExectorId,} = this.state;let params: any = {...this.state.page,};if (type && type.execStatus) {params.execStatus = type.execStatus;} else {params.statusSet = searchType;}if (deviceId) {params.deviceId = deviceId;}if (deviceCode) {params.deviceCode = deviceCode;}if (reporterId) {params.reporterId = reporterId;}if (realExectorId) {params.realExectorId = realExectorId;}if (type) {params = {...params,...this.state.page,};}getFaultCenterList(params).then((result) => {if (result?.code === SUCCESS) {if (type) {this.setState({listData: [...this.state.listData, ...result.data.list],loadMore: result.data.list.length > 0 ? 'more' : 'noMore',});} else {this.setState({listData: result.data.list,loadMore: result.data.total <= 10 ? 'noMore' : 'more',actionSheetIsOpen: false,page: { ...this.state.page, current: 1 },});}}this.handleLoading(false);}).catch(() => {this.setState({listData: [],loadMore: 'noMore',});this.handleLoading(false);});};

可以看到getList方法也有一个type，不过type之后有一个问号：

意思应该就是，如果你接下来需要使用getList方法的话，你可以传值，也可以不传值。

这一块是解构赋值。

在我的 getList 方法中，解构赋值的结果可以直接用于构造请求参数 params，从而简化代码。

这一小块代码意思是初始化请求的参数。

这一小块代码意思是，根据 type 参数设置请求的状态参数。如果 type 存在且包含 execStatus 属性，则将其添加到请求参数中；否则，使用 searchType。

这块代码的意思是看看有没有其他条件参数，有的话顺便把这些参数添加到params中，没有就跳过这段代码。

这段代码相对复杂一点，

getFaultCenterList(params)//发起请求