React 工具和库面试题, React 中展示组件和容器组件有什么区别?

Step 1

Q:: React 中展示组件和容器组件有什么区别？

A:: 展示组件（Presentational Components）主要负责 UI 展示，通常不处理业务逻辑和状态管理，它们通常通过 props 接收数据并进行渲染。容器组件（Container Components）则主要负责管理状态和业务逻辑，它们通常与 Redux 等状态管理库集成，处理数据的获取、状态变化等，并将这些数据通过 props 传递给展示组件。

Step 2

Q:: 什么是 React Hooks？为什么我们要使用它们？

A:: React Hooks 是 React 16.8 引入的一项功能，允许在函数组件中使用状态和其他 React 特性（例如生命周期方法）。使用 Hooks 的原因包括代码更简洁、组件之间逻辑复用更方便、不需要编写类组件等。常用的 Hooks 包括 useState、useEffect、useContext、useReducer 等。

Step 3

Q:: 什么是 Redux？它是如何工作的？

A:: Redux 是一个用于 JavaScript 应用程序的状态管理库，通常与 React 一起使用。它基于单一状态树的概念，整个应用的状态存储在一个对象树中，该树中每个状态变化都通过纯函数（reducer）来处理，并且这些状态变化是可预测的。Redux 的主要部分包括 Store、Actions、Reducers 和 Middleware。

Step 4

Q:: 如何优化 React 应用的性能？

A:: 优化 React 应用性能的方法有很多，包括使用 React.memo 来防止不必要的重新渲染，使用 useCallback 和 useMemo 来缓存函数和计算结果，代码分割（Code Splitting）来减小初始包大小，Lazy Loading 延迟加载组件，以及通过使用合适的状态管理策略来减少组件的渲染次数等。