use.shared

@rcp/use.shared

shared value like recoil

Installation

npm install @rcp/use.shared
# or use yarn
yarn add @rcp/use.shared

Usage

import { useShared, SharedProvider, useSharedProvider } from '@rcp/use.shared'

const Content = React.memo(({ symbol = fetchData }) => {
  // 必须使用唯一方法 ref，孩子获取数据
  const [data] = useShared(symbol)
  return <pre>{JSON.stringify(data, null, 2)}</pre>
})

const syncData = {
  wow: 123
}
const dynamicData = async (name) => ({
  wow: name
})
const Layout = ({ symbol = syncData }) => {
  // 提供数据，可以是静态数据，也可以是动态数据（同步或异步）
  // useSharedProvider(dynamicData, {}, [name])
  useSharedProvider(symbol, {}, [])
  return (
    <>
      <Content symbol={symbol} />
      <NoEffectComp />
    </>
  )
}

const NoEffect = jest.fn(() => {
  return null
})
const NoEffectComp = React.memo(NoEffect)

const App = ({ symbol }: any) => {
  // SharedProvider 用于提供共享数据存储载体，一般在 React Element Root 注入
  return (
    <SharedProvider>
      <Layout symbol={symbol} />
    </SharedProvider>
  )
}

API

useShared

数据获取，用于获取 useSharedProvider 共享的数据

Related

Authors

This library is written and maintained by 余聪, yucong@yuanfudao.com.

License

MIT