react完整知识体系
时间: 2024-08-12 13:04:40 浏览: 58
React是一个由Facebook开发的JavaScript库,用于构建用户界面。它的核心概念包括组件化、虚拟DOM和状态管理。以下是React的知识体系概览:
1. **React基础知识**:
- 组件 (Components): React的核心思想就是将UI拆分为独立、可复用的模块——组件。每个组件有自己的状态(state)和属性(props)。
- JSX: React 使用JSX语法,它是一种HTML-like语言,可以在JavaScript代码中嵌入HTML结构。
2. **生命周期方法**:
- Mounting (挂载): 比如`componentDidMount()`,当组件初次渲染完成时会被调用。
- Updating (更新): 当组件的状态或属性变化时,会触发一系列生命周期方法,如`shouldComponentUpdate()`, `getDerivedStateFromProps()`, 和 `render()`.
- Unmounting (卸载): `componentWillUnmount()`,在组件从DOM中移除前调用。
3. **状态管理和 props**:
- State: 组件内部的数据,只有该组件本身可以改变其状态。通过setState方法进行更新。
- Props: 父组件传递给子组件的数据,子组件不可直接修改,只读。
4. **虚拟DOM(Virtual DOM)**:
React通过创建和维护一个轻量级的虚拟DOM树,对比实际DOM,仅在必要的时候更新真实DOM,提高性能。
5. **React Router**: 用于客户端路由,帮助处理页面之间的导航。
6. **Redux / MobX**:
- Redux: 用于集中式的全局状态管理,数据流是单向的,通常配合Redux DevTools进行调试。
- MobX: 更轻量级的选择,提供更简单的声明式状态管理。
7. **Hook API**:
- 自React Hooks引入以来,开发者可以直接在函数组件内使用state和其他React特性,简化了组件设计。
8. **Context API**:
提供了一种在不通过props层层传递的方式下共享数据的能力。
9. **Redux Toolkit / React Query**:
- Redux Toolkit是Redux库的一些实用工具,简化Redux的使用。
- React Query用于异步数据获取,支持缓存、取消请求等高级功能。