React + TypeScript 基础速览

如果你正在从基础开始接触 Taro 或 React+TS 开发。常常会遇到以下痛点：

• 不清楚 JSX 如何在 JavaScript 中写 HTML，导致语法错误频发。
• useState 的类型推断不够直观，状态管理变得混乱。
• useEffect 的依赖规则让人头疼——特别是 “依赖数组空” 与 “清理函数” 的区别。
• 组件 Props 类型定义繁琐，易忘记可选/必选属性标注。
• 自定义 Hook 的实现与复用经常踩坑：没有正确处理依赖、错误捕获和 loading 状态。
• TypeScript 泛型与工具类型使用不熟练，导致接口拆分不规范。

下面按小节快速梳理这些主要概念。并配上实战代码，让你在 Taro 项目里能立刻落地。

. JSX — 在 JS 中写 HTML

// JSX = JavaScript + XML。让你在 JS 中写 UI
function Welcome {
const name = '张三'
const isVip = true
return (

{/* 文本插值 */}
你好，{name}！
{/* 条件渲染 */}
{isVip && VIP}
{/* 三元表达式 */}
{isVip?'尊贵会员' : '普通使用者'}

)
}

列表渲染

function UserList {
const users =
return (

{users.map(user => (

{user.name}
{user.age} 岁

))}

)
}

. useState — 状态管理

import { useState } from 'react'
function Counter {
const = useState // 数字状态
const = useState // 字符串状态
const = useState // 数组状态
return (

{/* 数字 */}
{count}
 setCount}>+
 setCount}>-
{/* 数组 */}
 setItems}>
添加

{items.map =>
}
)
}

. useEffect — 副作用

import { useState。useEffect } from 'react'
function UserProfile {
const = useState
const = useState
// 空数组 —— 初始化时只执行一次
// 使用 Taro.request 时请确保已引入 Taro API
useEffect => {
async function fetchUser{
setLoading
const res= await Taro.request({
至于url，'https://api.example.com/user'
})
setUser
setLoading
}
fetchUser
},)
if return
return
}

useEffect依赖规则简析

1. // 空数组 — 初始化时执行一次  useEffect=>,)
2. // 有依赖——当依赖变化时触发  useEffect=>,)
3. // 清理函数——卸载时执行  useEffect=>=>console.log,1000);return=>clearInterval),)
"

. Components 与 Props 定义实例化示例

// 定义 Props 类型
interface ProductCardProps {
从name来看。string,price:number,image:string,onBuy?怎么说呢，:void // 可选回调
}
// 函数组件实现
function ProductCard{
return (

{name}
{onBuy && }

);}
// 使用组件实例
function ProductList{
return(

Taro.showToast}/>
);怎么说呢，}

. 自定义 Hook 封装与复用实践

// 通用切换逻辑封装
function useToggle{
const =useState;const toggle=useCallback=>setValue,);const setTrue=useCallback=>setValue,);const setFalse=useCallback=>setValue,);return{value,toggle。setTrue,setFalse};说起来，}
// 使用示例
function PasswordInput{
const {value:visible。toggle}=useToggle;return(


);}

// 通用请求 Hook function useRequest<T>=>Promise<T>) { let =useState<T|null>;let =useState;let =useState<Error|null>;

let run=useCallback=>{ try{ setLoading; setError，let result=await fetcher;setData，}catch{setError;} finally{setLoading;} },)，

useEffect=>{run},);

return{data。loading,error,refresh:run};} // 使用示例：获取商品列表并渲染 function ProductPage{ const{data:pdtls。loading,refrsh}=useRequest=>fetchProducts);ifreturn，return( {pdtls?.map)} );}

. TypeScript 在 Taro 中常用方法

1. // 接口定义  User 接口：
   'interface User {' 至于'id。string' 从'name来看，string' 'avatar:string' 'age?这方面，number ' '}'
2. // API 响应泛型包装
   'interface ApiResponse<T>{' ' code:number 'message:string 说到'data。T} '}
3. // 泛型请求封装
   'async function fetchApi<T>:Promise<T>{' const res=await Taro.request;' if{throw new Error;} ' return res.data.data;} '
// 调用示例：获取使用者列表与单个使用者数据 const users=await fetchApi;，

const user=await fetchApi;

⚠️ 小提示：请根据后端实际返回字段调整接口字段名称和可选性 ⚠️

height=?怎么说呢，alt=supporting-image alt=supporting-image />
height=?src=https://i.stack.imgur.com/jB9Oa.gif alt=fading-loader.gif />

height=?src=http://static.cdn.tarsify.cn/images/loading.gif /> height=?src=http://cdn.tarsify.cn/static/img/loading.svg /> height=''.png '?alt=text-loading' />

常用类型工具

ts // Partial — 所有属性变可选 type UserUpdate = Partial // Pick — 指定属性 type UserBrief = Pick // Omit — 去除属性 type NewUser = Omit // Record — 键值对映射 type UserMap = Record;不过，

✅ 本篇小结 Checklist

下一篇预告：《页面与组件开发》—— 学习 Taro 内置组件程序和页面生命周期。

|