杭州网站设计公司排名,网站建设大作业提交要求,黄浦西安网站建设,山西seo推广目录
一、React 简介
1.什么是 React 2.React 核心特性
二、环境搭建
1. 创建 React 项目
2.关键配置
三、核心概念
1. JSX 语法
表达式嵌入
样式处理
2. 组件 (Component)
3. 状态 (State) 与属性 (Props)
4. 事件处理
合成事件#xff08;SyntheticEvent)
5. …目录
一、React 简介
1.什么是 React 2.React 核心特性
二、环境搭建
1. 创建 React 项目
2.关键配置
三、核心概念
1. JSX 语法
表达式嵌入
样式处理
2. 组件 (Component)
3. 状态 (State) 与属性 (Props)
4. 事件处理
合成事件SyntheticEvent)
5. 条件渲染
三元表达式
短路运算
6. 列表渲染
四、Hooks函数组件的核心
1. useState
基础用法
复杂对象管理
2. useEffect
3. 其他常用 Hooks
五、组件通信
1. 父传子通过 Props
2. 子传父通过回调函数
六、路由管理使用 React Router
1. 安装
2. 基础配置
七、状态管理使用 Context API
1. 创建 Context
八、进阶学习方向
九、官方资源 本文案例代码是TypeScriptReact
一、React 简介
1.什么是 React React 是一个用于构建用户界面的 JavaScript 库专注于视图层由 Facebook 开发。 声明式UI、组件化开发、虚拟DOM原理。 React vs Vue vs Angular生态与设计哲学对比。 2.React 核心特性 单向数据流、JSX、函数式编程思想。 跨平台能力React Native、React VR。 组件化将 UI 拆分为独立可复用的组件。 虚拟 DOM高效更新界面优化性能。 声明式编程通过描述 UI 的最终状态而非具体操作步骤。
二、环境搭建
1. 创建 React 项目
Create React App官方脚手架
npx create-react-app my-app --template typescript Vite更轻量快速
npm create vitelatest my-app -- --template react-ts
使用官方脚手架工具 create-react-app 快速初始化项目
npx create-react-app my-app
cd my-app
npm start
项目结构解析
my-app/src/components/ # 组件目录App.tsx # 根组件index.tsx # 入口文件public/ # 静态资源package.json
2.关键配置
路径别名tsconfig.json
{compilerOptions: {baseUrl: ./src,paths: {/*: [./*]}}
}
三、核心概念
1. JSX 语法
JSX 是 JavaScript 的语法扩展JSX本质React.createElement的语法糖
表达式嵌入
const name Alice;
const element h1Hello, React!/h1;
样式处理
div style{{ color: red, fontSize: 20 }}Styled Text/div
2. 组件 (Component)
函数组件推荐
interface Props {title: string;
}
const Header: React.FCProps ({ title }) h1{title}/h1;
类组件
class Counter extends React.Component{}, { count: number } {state { count: 0 };render() { return div{this.state.count}/div; }
}
3. 状态 (State) 与属性 (Props)
Props父组件传递给子组件的数据只读。
// 父组件
Child titleHello /
// 子组件
interface ChildProps { title: string; }
const Child: React.FCChildProps ({ title }) div{title}/div;
State组件内部管理的动态数据通过 useState 或 setState 更新。
const [count, setCount] useState(0);
4. 事件处理
button onClick{() alert(Clicked!)}Click Me/button
合成事件SyntheticEvent)
const handleClick (e: React.MouseEventHTMLButtonElement) {e.preventDefault();console.log(Clicked);
};
button onClick{handleClick}Click/button
5. 条件渲染
三元表达式
{ isLoggedIn ? UserPanel / : LoginButton / }
短路运算
{ isLoading Spinner / } 6. 列表渲染
key的重要性避免重复渲染问题
使用 map() 和 key 属性
const items [{ id: 1, name: Alice }, { id: 2, name: Bob }];
return (ul{items.map(item li key{item.id}{item.name}/li)}/ul
);
四、Hooks函数组件的核心
1. useState
基础用法
const [count, setCount] useStatenumber(0);
setCount(prev prev 1);
复杂对象管理
interface User { name: string; age: number; }
const [user, setUser] useStateUser({ name: Alice, age: 30 });
2. useEffect
副作用处理数据请求事件监听
useEffect(() {const timer setInterval(() console.log(Tick), 1000);return () clearInterval(timer); // 清理函数
}, []); // 空依赖数组表示仅执行一次
依赖数据控制更新
useEffect(() {// 组件挂载或更新时执行fetchData(userId);return () {// 组件卸载时清理如取消订阅};
}, [userId]); // 依赖数组控制执行时机
3. 其他常用 Hooks
useContext跨组件通信访问react上下文
const ThemeContext createContext(light);
const theme useContext(ThemeContext);
useRef获取DOM引用或保存可变值。
const inputRef useRefHTMLInputElement(null);
inputRef.current?.focus();
useMemo/useCallback性能优化
const memoizedValue useMemo(() computeExpensiveValue(a, b), [a, b]);
const memoizedCallback useCallback(() doSomething(a, b), [a, b]);
useReducer复杂状态管理。 五、组件通信
1. 父传子通过 Props
传递复杂对象
interface ParentProps { user: { id: number; name: string }; }
const Parent () Child user{{ id: 1, name: Alice }} /;
2. 子传父通过回调函数
定义回调
const Child ({ onSubmit }: { onSubmit: (data: string) void }) {return button onClick{() onSubmit(Data)}Submit/button;
};
六、路由管理使用 React Router
1. 安装
npm install react-router-dom
2. 基础配置
// App.tsx
import { BrowserRouter, Routes, Route } from react-router-dom;
const App () (BrowserRouterRoutesRoute path/ element{Home /} /Route path/user/:id element{UserProfile /} //Routes/BrowserRouter
);
七、状态管理使用 Context API
1. 创建 Context
// ThemeContext.tsx
import { createContext, useContext } from react;
interface ThemeContextType { theme: string; toggleTheme: () void; }
const ThemeContext createContextThemeContextType | undefined(undefined);// Provider 组件
export const ThemeProvider: React.FC{ children: React.ReactNode } ({ children }) {const [theme, setTheme] useState(light);const toggleTheme () setTheme(prev (prev light ? dark : light));return (ThemeContext.Provider value{{ theme, toggleTheme }}{children}/ThemeContext.Provider);
};// 自定义 Hook
export const useTheme () {const context useContext(ThemeContext);if (!context) throw new Error(useTheme must be used within ThemeProvider);return context;
};
八、进阶学习方向 性能优化React.memo、useMemo、useCallback、代码分割lazy Suspense。 状态管理库进阶Redux, Toolkit、Recoil、Zustand 服务端渲染SSR)Next.js框架集成 UI 库Material-UI, Ant Design 测试Jest React Testing Library、Cypress E2E 测试
九、官方资源 文档
React 官方文档最新特性与最佳实践。React 中文文档 2.社区 React GitHub、Reactiflux Discord。 3.工具链
Create React App 码字不易欢迎各位大佬点赞
