React.js 相关技术与知识点

Deebo08
126 阅读4分钟

1. React 基础概念

  • 组件：React 应用是由组件构成的，理解组件的定义和使用方式至关重要。组件有两种类型：
    • 函数组件（Functional Components）：简单的函数，返回 JSX。
    • 类组件（Class Components）：传统的 React 组件，使用类和生命周期方法来处理状态和副作用。
  • JSX：JSX 是 JavaScript 的语法扩展，用来描述 UI 结构。熟练理解 JSX 的基本语法、条件渲染、循环渲染等。
  • Props 和 State：
    • Props：组件间传递数据的方式，类似于函数参数。
    • State：组件的本地状态，每个组件可以有自己的 state 来维护数据。
  • 事件处理：React 中的事件处理使用 camelCase，例如 onClick，而不是 HTML 中的 onclick。

2. 组件生命周期（生命周期方法）

  • 类组件生命周期方法：
    • constructor(): 用于初始化组件状态。
    • componentDidMount(): 组件挂载后执行。
    • componentDidUpdate(): 组件更新后执行。
    • componentWillUnmount(): 组件卸载前执行。
  • 函数组件的生命周期：
    • 函数组件没有传统的生命周期方法，但可以通过 Hooks 实现副作用（effect）的管理，useEffect 就是用来模拟生命周期的。

3. React Hooks

  • useState：用于在函数组件中管理状态。
  • useEffect：用于处理副作用，类似于生命周期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount。
  • useContext：用于跨组件传递数据，代替 props 的传递，常与 React Context 一起使用。
  • useReducer：更适用于复杂状态管理，类似于 Redux 的简化版。
  • useMemo 和 useCallback：用于优化性能，避免不必要的重新渲染。
  • useRef：用于访问 DOM 元素或者存储不引起重新渲染的可变值。

4. React 路由（React Router）

  • React Router：用于在 React 应用中实现客户端路由。
    • BrowserRouter 和 HashRouter：两种不同的路由方式。
    • Route 和 Switch：定义路径和组件的关系。
    • Link：实现页面之间的跳转。
    • useParams、useLocation、useHistory：路由参数、位置和历史对象的获取。

5. React 状态管理

  • Context API：React 提供的一个轻量级的状态管理方案，适用于小型应用或局部状态共享。
  • Redux：一种广泛使用的状态管理库，适用于中大型应用。理解：
    • Actions、Reducers、Store、Dispatch。
    • Redux Toolkit：简化 Redux 的使用。
  • MobX：另一种流行的状态管理库，具有更简洁的 API 和更少的样板代码。

6. 组件通信

  • 父子组件通信：通过 props 从父组件传递数据给子组件，子组件通过回调函数向父组件发送数据。
  • 跨组件通信：通过 Context API 或者状态管理库（如 Redux）实现跨层级的组件数据共享。

7. React 性能优化

  • React.memo：优化函数组件的渲染性能，避免不必要的渲染。
  • PureComponent：React 类组件的优化，只有在 props 或 state 改变时才重新渲染。
  • 虚拟 DOM：理解虚拟 DOM 的概念以及如何通过 React 的虚拟 DOM 提高渲染效率。
  • 按需加载和懒加载：使用 React 的 React.lazy 和 Suspense 进行代码分割，提升应用加载速度。
  • shouldComponentUpdate：类组件中的性能优化方法，通过手动控制是否重新渲染。

8. React 表单处理

  • 受控组件：组件的表单元素（如 input）的值由 React 状态控制，用户输入时更新状态。
  • 非受控组件：表单元素的值不由 React 控制，而是由 DOM 自身管理。
  • 表单验证：通过 useState 管理表单数据，useEffect 做实时验证。

9. React 组件设计模式

  • 高阶组件（HOC）：一种通过组件增强其他组件功能的模式，常用于逻辑复用。
  • Render Props：通过将渲染逻辑作为 prop 传递来实现组件间的代码共享。
  • 组合模式：通过组合多个小组件来构建复杂的组件。

10. React 开发工具和调试

  • React Developer Tools：安装浏览器插件来检查 React 组件树、props 和 state。
  • 调试技巧：理解如何通过 console.log、React DevTools 或者断点调试来排查 React 应用中的问题。

11. 构建和部署

  • Create React App：React 官方提供的构建工具，自动配置了 Webpack 和 Babel，用于快速搭建 React 项目。
  • Vite：现代的构建工具，相比于 Webpack 更快速和高效。
  • 构建优化：理解生产环境构建的优化技巧（如压缩、代码分割、懒加载等）。

12. React 测试

  • 单元测试：使用 Jest 或 Mocha 编写组件的单元测试。
  • 测试库：React Testing Library 用于测试 React 组件的渲染结果和用户交互。
  • 模拟函数：通过 jest.fn() 来模拟函数行为，用于测试组件的交互。

13. 其他工具和技术

  • TypeScript 与 React：学习如何在 React 项目中使用 TypeScript，提高代码的可维护性和可读性。
  • CSS-in-JS：学习如何在 React 中使用 styled-components 或 emotion 等 CSS-in-JS 库来处理样式。
  • Next.js：一个基于 React 的服务器端渲染框架，学习如何使用它进行 SSR（服务器端渲染）和静态生成（SSG）。
avatar
文章
阅读
粉丝