状态一致性
React 开发就是复杂应用程序状态的管理和开发。
原则一：保证状态最小化
在保证 State 完整性的同时也要保证它的最小化，如果某些数据能从已有的 state 中计算得到那么不要把计算的结果存到 state 内。
按照 React 的状态驱动 UI 的思想，开发时第一步要考虑整个功能有哪几个状态。
React 提供的useMemo这个 Hook 就可以缓存计算的结果。
原则二：避免中间状态，确保唯一数据源
在有些场景下，比如原始状态数据来自某个外部数据源，非 state 或者 props，冗余状态就没有那么明显，此时需要准确定位状态的数据源并在开发中确保它是唯一的数据源。
这里的例子是 URL 上查询关键词同步的场景。
实战演练：创建自定义受控组件
受控组件：组件的展示完全由传入的属性决定。
非受控组件：表单组件可以有自己的内部状态且他的展示值不受控。
自定义受控组件：
- 避免多余的状态：不需要在自定义组件内部去定义状态用于保存数据
- 找到准确的唯一数据源：准确且唯一的来源就是福组件传递进来的状态
思考
如何实现 useSearchParams（用于监听查询参数的变化）这个 Hook？
history.pushState 不会出发页面重新渲染，所以通常只能获取第一次的 URL 参数，如果 URL 参数发生变化无法查询到，所以可以通过 patch 的方法来监听 url 变化。
