7、React开发中的Hooks与组件组合模式

React开发中的Hooks与组件组合模式

1. useReducer Hook的理解与应用

在React开发中， useReducer Hook与Redux有相似之处，二者都涉及到动作（actions）、reducers、调度（dispatch）、存储（store）和状态（state）等概念。不过，它们也存在明显差异。 react-redux 提供了如thunk、sagas等中间件和包装器，而 useReducer 仅提供一个 dispatch 方法，用于将普通对象作为动作进行调度，并且默认没有存储，虽然可以使用 useContext 创建，但这有些多此一举。

下面通过创建一个基本的笔记应用来深入理解 useReducer 的工作原理。
操作步骤如下：
1. 创建一个新的React应用：

create-react-app reducer --template typescript

2. 删除 src 文件夹中除 App.tsx 和 index.tsx 之外的所有文件，开启全新应用。
3. 在 App.tsx 中导入 Notes 组件：