精读《一种 Hooks 数据流管理方案》

[ascoders]

基于 Hooks 的数据流很方便，但跨组件 props 传递如果仅一层层透传，会造成大量模版代码，随之而来的是维护成本不断升高。

React.useContext 是一种跨组件数据传递方案，但可惜无法做到按需更新，即有一个变量改变，所有使用了 useContext 的组件都会重渲染。为解决这个问题，可以把 useContext 粒度拆碎，但应用存在几十个 context 显然也增加了维护成本，还有一种方案是 use-context-selector，一定程度解决了问题，但有一些 局限。

今天笔者介绍一种新的数据流管理方案，利用 react-redux 更彻底的解决组件作用域内的状态管理问题。

---

精读《一种 Hooks 数据流管理方案》

[baxtergu]

有些疑惑，文章中的 不可变数据 是不是特指组件在业务上一旦初始化以后就不会再变化的数据，而不是 Immutable 类型的数据？

[Rainsho]

有些疑惑，文章中的 useXxx(fn?) 内部的可变数据如何更新呢？通过暴露的不可变方法吗？

[ascoders]

有些疑惑，文章中的 不可变数据 是不是特指组件在业务上一旦初始化以后就不会再变化的数据，而不是 Immutable 类型的数据？

对，所以没有用 Immutable，而是 Static。

[ascoders]

有些疑惑，文章中的 useXxx(fn?) 内部的可变数据如何更新呢？通过暴露的不可变方法吗？

两种更新途径：

1. 如果可变数据是外面传进来的，则外面更新内部自然会更新，比如：

<Provider dynamicValue={{ color: props.color }} />

2. 内部也有修改可变数据的能力，即自定义 hooks 里，通过 setState 来做：

const { useState: useDesigner, Provider } = createHookStore<{
  dynamicValue: { color: string }
}>(({ setState }) => {
  const myCallback = useCallback(() => {
    setState(state => ({
      ...state,
      color: 'red'
    }))
  }, [setState])

  return useMemo(() => ({
    myCallback
  }), [myCallback])
})

function App() {
  const { myCallback } = useDesigner()
  // 在某个回调里执行 myCallback()
}

这个和第一点不冲突，如果外部 color 变了，值也会被刷新，如果不想被刷新，可以用 defaultDynamicValue:

<Provider defaultDynamicValue={{ color: props.color }} />

[Mmear]

很好奇 createHookStore 的类型定义是怎么写的，尤其是自定义 hook 依赖了 dynamic 和 static 之后的返回值类型

[ascoders]

很好奇 createHookStore 的类型定义是怎么写的，尤其是自定义 hook 依赖了 dynamic 和 static 之后的返回值类型

这是个难点，不过只要灵活使用泛型推导就行啦。