feat: readme新增lazy + suspense说明

README.md

@@ -7,7 +7,7 @@ keep-alive的react版本，它基于Suspense实现，通过它我们可以实现
 ```typescript
 import { useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Offscreen } from 'react-offscreen';
+import { Offscreen } from '@ivliu/react-offscreen';
 
 const Count = () => {
   const [count, setCount] = useState(0);
@@ -32,13 +32,51 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 
 ## 注意
 
+### 配合lazy组件使用
+
+由于Activity(Offscreen)组件是基于Suspense实现的，所以当配合lazy且需要设置fallback需要注意嵌套顺序。
+
+```typescript
+import { useState, lazy, Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Activity } from '@ivliu/react-offscreen';
+
+const LazyCount = lazy(() => import('./Count')); 
+
+const Count = () => {
+  const [count, setCount] = useState(0);
+
+  return <p onClick={() => setCount(count + 1)}>{count}</p>;
+};
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <button onClick={() => setVisible(!open)}>{open}</button>
+      <Activity mode={open ? 'visible' : 'hidden'}>
+        {/** Suspense应该在Activity(Suspense)组件下 */}
+        <Suspense fallback="loading...">
+          <LazyCount />
+        </Suspense>
+      </Activity>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+### 结合concurrent feature使用
+
 如果你使用的react18，且使用了concurrent feature，那么需要注意由concurrent feature触发更新引起的组件挂起不会切换回退显示，所以如果出现mode为hidden时子组件无法隐藏的话请改为同步渲染即可正常工作，具体可以参考https://zh-hans.react.dev/reference/react/Suspense#preventing-already-revealed-content-from-hiding
 
-### 错误示例
+#### 错误示例
+
 ```typescript
 import { useState, startTransition } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Offscreen } from 'react-offscreen';
+import { Offscreen } from '@ivliu/react-offscreen';
 
 const Count = () => {
   const [count, setCount] = useState(0);
@@ -60,12 +98,14 @@ const App = () => {
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 ```
-### 正确示例
+#### 正确示例
+
 移除startTransition或者useDeferredValue即可
+
 ```typescript
 import { useState } from 'react';
 import ReactDOM from 'react-dom/client';
-import { Offscreen } from 'react-offscreen';
+import { Offscreen } from '@ivliu/react-offscreen';
 
 const Count = () => {
   const [count, setCount] = useState(0);
@@ -88,12 +128,41 @@ const App = () => {
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 ```
 
-## Activity
+## Activity导出
+
 由于react官方已经将Offscreen重命名为Activity，为了与官方保持一致，我们同时导出了Offscreen和Activity。
 
+```typescript
+import { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Activity } from '@ivliu/react-offscreen';
+
+const Count = () => {
+  const [count, setCount] = useState(0);
+
+  return <p onClick={() => setCount(count + 1)}>{count}</p>;
+};
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <button onClick={() => setVisible(!open)}>{open}</button>
+      <Activity mode={open ? 'visible' : 'hidden'}>
+        <Count />
+      </Activity>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
 ## unstable hooks
+
 我们实验性的支持了激活 失活的hooks，但是它的执行时机是晚于Effect的，这与react未来规划不符，所以我们不准备将其合并至主分支，有兴趣的可以自行fork使用。
 具体可以参考https://github.com/IVLIU/react-offscreen/tree/feat/unstable-hooks
+
 ```typescript
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -128,4 +197,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
 ```
 
 ## 注意
-仅支持react 17版本及以上
+
+仅支持react 16.8版本及以上