13、React 开发中的状态管理与 Flux、Redux 模式解析

React 开发中的状态管理与 Flux、Redux 模式解析

1. 高阶组件与弹出按钮

在 React 开发中，高阶组件是复用功能和抽象组件状态及生命周期管理细节的有效方式。以下是一个弹出按钮组件的示例：

const PopUpButton = Expandable(MenuButton)
render(
    <PopUpButton hidden={true} txt="toggle popup">
        <h1>Hidden Content</h1>
        <p>This content will start off hidden</p>
    </PopUpButton>,
    document.getElementById('react-container')
)

这个 PopUpButton 由 MenuButton 组件创建，它会将折叠状态以及改变该状态的函数作为属性传递给 MenuButton 。用户点击按钮时，会调用 expandCollapse 函数来切换折叠状态。折叠状态下，只显示按钮；展开状态下，会显示按钮和包含隐藏内容的 div 。

2. React 外部状态管理

虽然 React 内置的状态管理系统能构建很多应用，但随着应用规模增大，状态管理会变得复杂。将状态集中在组件树的根节点有助于简