Hooks versus Redux钩子与 Redux

Estimated time needed: 3 minutes
预计所需时间：3 分钟

React hooks and Redux are powerful tools for managing state in React applications, each offering unique strengths and suitable use cases. Let's learn about both the tools and their specific utilization in React applications.
React hooks 和 Redux 是管理 React 应用程序状态的有力工具，每个都提供独特的优势和应用场景。让我们了解这两个工具及其在 React 应用程序中的具体应用。

Objectives 目标

After completing this reading, you will be able to:
完成阅读后，您将能够：

• Describe the key features, benefits, and limitations of React Hooks
  描述 React Hooks 的关键特性、优势和局限性
• Describe the key features, benefits, and limitations of Redux
  描述 Redux 的关键特性、优势和局限性
• Compare Hooks and Redux use cases
  比较 Hooks 和 Redux 的使用场景

React Hooks

Overview 概述

React hooks are a feature introduced in React 16.8 and are used in functional components to utilize state and other React features without writing a class. Hooks provide a way to reuse stateful logic across components.
React 钩子是 React 16.8 中引入的功能，用于在函数组件中利用状态和其他 React 功能，而无需编写类。钩子提供了一种在组件间重用状态逻辑的方法。

Key Features 关键特性

• useState: This lets functional components set up and care for their own state variables, allowing them to store data that can change over time.
  useState：这允许函数组件设置和照顾它们自己的状态变量，使它们能够存储随时间变化的数据。
• useEffect: This lets functional components do side effects like getting data or changing the DOM after every view, which is how lifecycles work.
  useEffect: 这允许函数组件在每次视图后执行副作用，如获取数据或更改 DOM，这就是生命周期的工作方式。
• useContext: This property lets functional components use context values passed down from parent components. This property makes it easier for data to be shared across the component tree.
  useContext: 这个属性允许函数组件使用从父组件传递下来的上下文值。这个属性使得数据在组件树中共享变得更加容易。
• Custom hooks: Developers can put stateful logic that can be used repeatedly into custom hooks. This hook makes code reuse easier and separates complex behavior into components.
  自定义钩子：开发者可以将可重复使用的状态逻辑放入自定义钩子中。此钩子使代码重用更简单，并将复杂行为分离成组件。

Benefits 优势

• Easy to use: Hooks are easy to use in React components by putting stateful code inside functional components.
  易于使用：通过在函数组件内放置有状态的代码，React 组件中的 Hooks 很容易使用。
• Code reusability: Hooks enable developers to create reusable logic that can be shared across components, improving code organization and maintainability.
  代码复用：Hooks 允许开发者创建可跨组件共享的可复用逻辑，从而提高代码组织和可维护性。
• Reduced boilerplate: Hooks eliminate the need for class components and reduce boilerplate code associated with state management.
  简化样板代码：钩子消除了对类组件的需求，并减少了与状态管理相关的样板代码。

Limitations 限制

• Learning curve: Developers familiar with class components may need time to adapt to the functional paradigm and the nuances of hooks.
  学习曲线：熟悉类组件的开发者可能需要时间来适应函数范式和钩子的细微差别。
• Complex state management: While useState and useContext are suitable for simple state management, more complex applications may require additional patterns or libraries for state management.
  复杂的状态管理：虽然 useState 和 useContext 适合简单的状态管理，但对于更复杂的应用程序，可能需要额外的模式或库来进行状态管理。

Redux Redux React 状态管理库

Overview 概述

Redux is a container for states that must be kept in JavaScript apps. It's mainly used with React, but you can use it with any other view library or framework. It provides a centralized store for managing application state and enables predictable state updates through actions and reducers.
Redux 是用于在 JavaScript 应用中保存必须保持的状态的容器。它主要用于与 React 一起使用，但也可以与任何其他视图库或框架一起使用。它提供了一个集中式存储来管理应用程序状态，并通过动作和还原器实现可预测的状态更新。

Key Concepts 关键概念

• Store: This holds the whole state tree of an app and is the only source of truth.
  存储：这包含了一个应用的全局状态树，是唯一的事实来源。
• Actions: These are just plain JavaScript objects that let you change the state.
  动作：这些只是普通的 JavaScript 对象，允许你改变状态。
• Reducers: They are used to instruct the app on how to change its state when you perform an action.
  归约器：它们用于指导应用在执行操作时如何更改其状态。

Benefits 优势

• Predictable state management: Redux needs data to move only in one direction that cannot be changed. This movement makes it easier to understand and plan for state changes.
  可预测的状态管理：Redux 需要数据只能单向移动且不可更改。这种移动使得理解并规划状态变化更加容易。
• Centralized state: Redux keeps all apps' state in one place, which makes it easier for all its parts to see and change data.
  集中状态：Redux 将所有应用的 state 保存在一个地方，这使得所有部分更容易查看和更改数据。
• Debugging and time travel: Redux DevTools have powerful debugging tools, such as time-travel debugging that lets you see how states change over time.
  调试和时间旅行：Redux DevTools 拥有强大的调试工具，例如时间旅行调试，让您可以看到状态随时间的变化。
• Community and ecosystem: Redux has a large, active community, and its ecosystem comprises many middleware, services, and development tools.
  社区和生态系统：Redux 拥有一个庞大、活跃的社区，其生态系统包括许多中间件、服务和开发工具。

Limitations 限制

• Boilerplate: Redux often requires writing more boilerplate code than local component state management or other state management solutions.
  模板：Redux 通常需要编写比本地组件状态管理或其他状态管理解决方案更多的模板代码。
• Learning curve: The concepts of Redux, especially actions, reducers, and middleware, can be challenging for beginners or developers unfamiliar with functional programming paradigms.
  学习曲线：Redux 的概念，尤其是动作、还原器和中间件，对于初学者或对函数式编程范式不熟悉的开发者来说可能具有挑战性。
• Overkill for small applications: For smaller applications with simple state management needs, Redux may introduce unnecessary complexity.
  过度设计小型应用：对于需要简单状态管理的小型应用，Redux 可能会引入不必要的复杂性。

Comparison 比较

Use Cases 用例

• There are hooks that can be used to manage the state of a single component, share code between components, and control the state of a single component.
  存在可以用来管理单个组件状态、在组件之间共享代码以及控制单个组件状态的钩子。
• When more than one part of an app needs to share complex app state, or when the app has a lot of events and complex data flow, Redux is a great tool to use.
  当一个应用中的多个部分需要共享复杂的应用状态，或者当应用有很多事件和复杂的数据流时，Redux 是一个很好的工具。

Learning Curve 学习曲线

• Hooks: Relatively easier to learn, especially for developers already familiar with functional components and React's lifecycle methods.
  钩子：相对容易学习，尤其是对于已经熟悉函数组件和 React 生命周期方法的开发者来说。
• Redux: Has a steeper learning curve due to its concepts like actions, reducers, and middleware, particularly for developers new to state management patterns.
  Redux：由于其动作、还原器和中间件等概念，学习曲线较陡峭，尤其是对于新手开发者来说，他们在状态管理模式方面较为陌生。

Scalability 可扩展性

• Hooks: Well-suited for small to medium-sized applications and simpler state management needs. It may become cumbersome for large-scale applications with extensive state management requirements.
  钩子：非常适合小型到中型应用以及简单的状态管理需求。对于需要大量状态管理的大型应用来说可能会变得繁琐。
• Redux: Scales well for large applications with complex state management needs, providing a structured approach to manage application state and maintainability.
  Redux：适用于大型应用程序，具有复杂状态管理需求，提供了一种结构化的方法来管理应用程序状态和可维护性。

Developer Experience 开发者体验

• Hooks: Offer a more streamlined and intuitive development experience for managing state within components, with less boilerplate and a more functional programming style.
  钩子：为在组件内管理状态提供更流畅直观的开发体验，减少样板代码，并采用更函数式编程风格。
• Redux: Offers a strong and reliable state management solution, which is especially helpful for big teams or applications that need to handle complex data flow.
  Redux：提供强大且可靠的州管理解决方案，特别适用于大型团队或需要处理复杂数据流的应用程序。

Conclusion 结论

React hooks and Redux are powerful tools for managing state in React applications, each with strengths and suitable use cases. Hooks offer simplicity, code reusability, and a more functional approach to state management within components. On the other hand, Redux provides a centralized and predictable state management solution, ideal for larger applications with complex data flow requirements. The choice between Hooks and Redux depends on the application's specific needs, complexity, and scale, as well as the preferences and familiarity of the development team.
React hooks 和 Redux 是管理 React 应用程序状态的有力工具，各具优势和应用场景。Hooks 提供了简洁性、代码复用性以及更函数式的组件状态管理方法。另一方面，Redux 提供了集中化和可预测的状态管理解决方案，非常适合具有复杂数据流需求的大型应用程序。选择 Hooks 和 Redux 取决于应用程序的具体需求、复杂性和规模，以及开发团队的偏好和熟悉度。