Hello.
19 |Hello.
35 | ) 36 | }) 37 | ``` 38 | 39 | ## immer 40 | 41 | [immer](https://github.com/immerjs/immer) is a tiny package that allows you to work with immutable state in a more convenient way. You can see [here](https://github.com/immerjs/immer#reactsetstate-example) for more information. 42 | 43 | ## useAction 44 | 45 | the function passed to `useEffect` fires after layout and paint, during a deferred event. If you need to execute the effect function immediately, you can use [useAction](https://github.com/awmleer/use-action) in replacement. 46 | 47 | > Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn’t block the browser from updating the screen. 48 | 49 | ## useCreation 50 | 51 | [useCreation](https://github.com/awmleer/use-creation) is the replacement for `useMemo` or `useRef`. 52 | 53 | `useMemo` can't guarantee the memoized value will not be recalculated, while `useCreation` can guarantee that. 54 | 55 | > **You may rely on useMemo as a performance optimization, not as a semantic guarantee.**In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. 56 | 57 | And similar to `useRef`, you can use `useCreation` to create some constants. But `useCreation` can avoid performance hazards. 58 | 59 | ```javascript 60 | const a = useRef(new Subject()) //A new Subject instance is created in every render. 61 | const b = useCreation(() => new Subject(), []) //By using factory function, Subject is only instantiated once. 62 | ``` 63 | 64 | ## Rx.js 65 | 66 | You can use Rx.js to create a event stream. In order to prevent recreating streams, you can use the [useCreation](https://github.com/awmleer/use-creation) hook. 67 | 68 | ```jsx 69 | export function FooStore() { 70 | const event$ = useCreation(() => new Subject()) // <- Here 71 | 72 | function notify(data) { 73 | event$.next(data) 74 | } 75 | 76 | return { 77 | opened$, 78 | notify, 79 | } 80 | } 81 | ``` 82 | 83 | ## useReducer 84 | 85 | If you like flux or redux, `useReducer` may be suitable for you. But we don't recommend using it. 86 | 87 | -------------------------------------------------------------------------------- /docs/zh-cn/_coverpage.md: -------------------------------------------------------------------------------- 1 | # Reto 2 | 3 | > 基于hooks的React Store，灵活而高效。 4 | 5 | - 写Store就像写Custom Hook 6 | - 简单但高效，10分钟快速上手 7 | 8 | [GitHub](https://github.com/awmleer/reto/) 9 | [English](/) 10 | [快速上手](./get-started.md) 11 | 12 |  13 | 14 |  15 | -------------------------------------------------------------------------------- /docs/zh-cn/_sidebar.md: -------------------------------------------------------------------------------- 1 | * [快速上手](./get-started.md) 2 | * [使用指南](./guide.md) 3 | * [进阶用法](./advanced.md) 4 | * [常见问题](./faq.md) 5 | * [第三方库](./third-party-libraries.md) 6 | -------------------------------------------------------------------------------- /docs/zh-cn/advanced.md: -------------------------------------------------------------------------------- 1 | ## 传递参数给Store 2 | 3 | 可以通过Provider的args属性传递参数给Store： 4 | 5 | ```jsx 6 | export function FooStore(initial = 1) { 7 | const [x, setX] = useState(initial) 8 | return { 9 | x, 10 | setX 11 | } 12 | } 13 | ``` 14 | 15 | ```jsx 16 |Hello.
19 |Hello.
35 | ) 36 | }) 37 | ``` 38 | 39 | ## immer 40 | 41 | 使用[immer](https://github.com/immerjs/immer)可以在某些时候简化`setState`的语法，详细用法可以参考其官方文档上的[介绍](https://github.com/immerjs/immer#reactsetstate-example)。 42 | 43 | ## useAction 44 | 45 | 由于`useEffect`是会延后执行的，因此在Reto中，[useAction](https://github.com/awmleer/use-action)是一个更适合的替代品。 46 | 47 | > Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn’t block the browser from updating the screen. 48 | 49 | ## useCreation 50 | 51 | [useCreation](https://github.com/awmleer/use-creation)是`useMemo`或`useRef`的替代品。 52 | 53 | 因为`useMemo`不能保证被memo的值一定不会被重计算，而`useCreation`可以保证这一点。 54 | 55 | > **You may rely on useMemo as a performance optimization, not as a semantic guarantee.**In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without `useMemo` — and then add it to optimize performance. 56 | 57 | 而相比于`useRef`，你可以使用`useCreation`创建一些常量，这些常量和`useRef`创建出来的ref有很多使用场景上的相似，但对于复杂常量的创建，`useRef`却容易出现潜在的性能隐患。 58 | 59 | ```javascript 60 | const a = useRef(new Subject()) //每次重渲染，都会执行实例化Subject的过程，即便这个实例立刻就被扔掉了 61 | const b = useCreation(() => new Subject(), []) //通过factory函数，可以避免性能隐患 62 | ``` 63 | 64 | ## Rx.js 65 | 66 | Rx.js非常适合事件通知的逻辑，在Reto中，可以配合`useCreation`使用Rx.js： 67 | 68 | ```jsx 69 | export function FooStore() { 70 | const event$ = useCreation(() => new Subject()) // 使用useCreation来避免重复创建Subject 71 | 72 | function notify(data) { 73 | event$.next(data) 74 | } 75 | 76 | return { 77 | opened$, 78 | notify, 79 | } 80 | } 81 | ``` 82 | 83 | ## useReducer 84 | 85 | 当Store变得非常复杂时，可以通过`useReducer`更好的组织逻辑。详见[文档](https://reactjs.org/docs/hooks-reference.html#usereducer)。不过笔者并不非常推荐使用它，因为当组件变得过于庞大时，更好的办法是进行拆分。 86 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp') 2 | const del = require('del') 3 | const rollupConfig = require('./rollup.config') 4 | const rollup = require('rollup') 5 | const ts = require('gulp-typescript') 6 | 7 | gulp.task('clean-lib', async function() { 8 | await del('lib/**') 9 | }) 10 | 11 | gulp.task('copy-files', function() { 12 | return gulp 13 | .src(['package.json', 'README.md', 'LICENSE']) 14 | .pipe(gulp.dest('lib/')) 15 | }) 16 | 17 | gulp.task('ts', function() { 18 | const tsProject = ts.createProject('tsconfig.json') 19 | return tsProject.src() 20 | .pipe(tsProject()) 21 | .pipe(gulp.dest('lib')) 22 | }) 23 | 24 | gulp.task('rollup', gulp.series( 25 | function() { 26 | const tsProject = ts.createProject('tsconfig.json', { 27 | module: 'esnext', 28 | }) 29 | return tsProject.src() 30 | .pipe(tsProject()) 31 | .pipe(gulp.dest('lib/es')) 32 | }, 33 | async function() { 34 | const bundle = await rollup.rollup(rollupConfig) 35 | return await bundle.write(rollupConfig.output) 36 | }, 37 | async function() { 38 | await del('lib/es') 39 | } 40 | )) 41 | 42 | gulp.task('build', gulp.series('clean-lib', 'rollup', 'ts', 'copy-files')) 43 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | // For a detailed explanation regarding each configuration property, visit: 2 | // https://jestjs.io/docs/en/configuration.html 3 | 4 | module.exports = { 5 | setupFilesAfterEnv: [ 6 | '@testing-library/react/cleanup-after-each', 7 | ], 8 | // All imported modules in your tests should be mocked automatically 9 | // automock: false, 10 | 11 | // Stop running tests after the first failure 12 | // bail: false, 13 | 14 | // Respect "browser" field in package.json when resolving modules 15 | // browser: false, 16 | 17 | // The directory where Jest should state its cached dependency information 18 | // cacheDirectory: "/var/folders/bx/hmqz3c7x2nb8pknt576dv7bw0000gn/T/jest_dx", 19 | 20 | // Automatically clear mock calls and instances between every test 21 | // clearMocks: false, 22 | 23 | // Indicates whether the coverage information should be collected while executing the test 24 | // collectCoverage: false, 25 | 26 | // An array of glob patterns indicating a set of files for which coverage information should be collected 27 | collectCoverageFrom: [ 28 | "132 | 1 133 |
134 |135 | 1 136 |
137 |138 | 1 139 |
140 |146 | 2 147 |
148 |149 | 2 150 |
151 |152 | 1 153 |
154 |{fooStore.x}
221 | ) 222 | } 223 | 224 | const App = forwardRef((props, ref) => { 225 | const [flag, setFlag] = useState(0) 226 | useImperativeHandle(ref,() => { 227 | return { 228 | setFlag 229 | } 230 | }) 231 | return ( 232 | <> 233 | {
5 | (...args: P): V
6 | displayName?: string
7 | // defaultProps?
8 |
9 | Context?: Context = S extends Store = S extends Store(s: S) {
17 | if (!s.Context) {
18 | s.Context = React.createContext(new Container(defaultStoreValue))
19 | }
20 | return s.Context
21 | }
22 |
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |