第十八周：播客

技术
工具
生活
一句话
没有脑袋

技术

假如你有一个项目，项目里有这样的需求，1）检查用户登录状态，2）特性检测按需渲染，3）埋点日志需求，4）layout 渲染。你可能会这么写。

const App = () => {
  useEffect(() => {
    if (!user.isLogin) signIn()
  }, [])
  useEffect(() => {
    log({ pageName, uid })
  }, [])
  return user.isAdmin ? (
    <AdminComponent />
  ) : (
    <>
      {features.includes('foo') && <Foo />}
      <Conent />
    </>
  )
}

这里的问题是，如果有多个组件都需要类似的逻辑，你可能就要复制粘贴了。解是用 Provider + HOC + Composition + Currying。

const App = withProviders({ showFooter: false })(() => {
  return <Content />
})

const withProviders = (options) => compose(withUser, withFeatures, withLogger, withLayout(options))

const withLogger = (WrappedComponent) => {
  return (props) => {
    useEffect(() => {
      log({ pageName, uid })
    }, [])
    return <WrappedComponent {...props} />
  }
}

个人感觉对比于以上提到的 HOC+Provider 的用法，自己还是更喜欢 CustomHook+Provider 的实现，但某种意义上来 HOC 的封装性还是会更强一些

工具

theatre
运动设计编辑器

https://github.com/Hypercontext/linkifyjs
页面上的链接替换

react-tether
页面组件支持被拖拽位置

tesseract.js
图片文字提取

生活

中文播客榜

一句话

人们沉迷的其实并不是智能手机，而是智能手机提供的一个活跃的社交环境。
无论你走到哪里，通过手机，都可以跟数十亿人连结在一起。过去，人们最多跟一百多人一起工作，现在我们可以无限制地访问每个人的页面。当然，这不一定是好事。
-- 《为什么我们沉迷于手机？》

没有脑袋

__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED