feat: react 19 (#149)

* chore: React 19

* feat: 补充 useOptimistic 作为草稿

* rf: 调整日志

Author: iugo

_posts/2024/2024-12-06-react-19.md

@@ -0,0 +1,155 @@
+---
+title: React 19
+categories: [react]
+author: iugo
+---
+
+React 19 终于正式发布了: <https://react.dev/blog/2024/12/05/react-19>
+
+新版本中新增了许多功能, 其中, 一些功能是我们重点关注的:
+
+1. `useActionState`
+2. `use`
+3. `useOptimistic`
+4. `ref` 作为 props 传递
+
+## useActionState
+
+在使用 useActionState 的时候, 我们需要注意的是, 在函数内部能否调用 setState
+函数对数据进行部分修改.
+
+官方演示非常清晰, 这里稍作修改:
+
+```tsx
+function DataTable({ name }) {
+  const [result, updateData, isPending] = useActionState(
+    async (previousState, name) => {
+      const result = await getDataPromise(name);
+      return result;
+    },
+    new Result(),
+  );
+
+  return (
+    <>
+      <Table data={result} isPending={isPending} />
+      <button
+        type="submit"
+        disabled={isPending}
+        onClick={() => {
+          updateData(name);
+        }}
+      >
+        Update
+      </button>
+    </>
+  );
+}
+```
+
+## use
+
+use 仍然不是一定足够可靠的功能. 之前 React 团队就说了 use 的局限性, 现在
+React 19 仍然没有解决这个问题.
+
+我们预期仅在初始化数据的时候使用 use, 在更新数据的时候仍使用 useState.
+在组件中, 同时保有这两种状态管理的方式, 比如:
+
+```tsx
+function MyComponent() {
+  const initData = use(getDataPromise());
+  // 👆 因为现在不能在渲染组件中创建 Promise, 所以现在会报错
+  const [data, setData] = useState<Data | null>(null);
+  const currentData = useMemo(() => data ?? initData, [data, initData]);
+
+  return (
+    <>
+      {currentData}
+      <button
+        onClick={async () => {
+          const data = await getDataPromise();
+          setData(data);
+        }}
+      >
+        Set Data
+      </button>
+    </>
+  );
+}
+```
+
+不过, 如何我们区分初始化数据和更新数据, 仅在系统初始化数据的时候使用 use,
+那么 use 仍然是一个非常有用的功能. 比如:
+
+```tsx
+const configPromise = getConfigPromise();
+
+function MyComponent() {
+  const config = use(configPromise);
+  const [data, setData] = useState<Data | null>(null);
+
+  return (
+    <>
+      {data}
+      <button
+        onClick={async () => {
+          const data = await getDataPromise(config);
+          setData(data);
+        }}
+      >
+        Set Data
+      </button>
+    </>
+  );
+}
+```
+
+## useOptimistic
+
+在上面的例子中, 我们区分了 initData, data 和 currentData. 在 React 19 中,
+我们使用 useOptimistic 可以对前端预计修改成功的数据进行优化. 比如:
+
+```tsx
+function MyComponent() {
+  const [data, setData] = useState<Data | null>(null);
+  const [currentData, setOptimisticData] = useOptimistic(data);
+
+  return (
+    <>
+      {currentData}
+      <button
+        onClick={async () => {
+          setOptimisticData(tempData);
+          const data = await getDataPromise(tempData);
+          setData(data);
+        }}
+      >
+        Set Data
+      </button>
+    </>
+  );
+}
+```
+
+在大多数情况下, 这是一个纯优化, 并不会功能有影响.
+
+这种优化甚至还有负面效果, 比如:
+
+1. 如果用户在点击按钮之后, 已经渲染了新的数据, 这时用户认为已经完成.
+2. 然后, 如果后端数据更新失败, 那么数据会重置回错误之前的数据, 但用户不一定会注意到.
+
+## ref 作为 props 传递
+
+之前, ref 作为 props 传递的时候时会报错. 需要使用 forwardRef 来传递.
+但是, 现在 React 19 中, 不再需要使用 forwardRef 来传递, 可以直接传递 ref.
+
+官方演示为:
+
+```tsx
+function MyInput({placeholder, ref}) {
+  return <input placeholder={placeholder} ref={ref} />
+}
+
+//...
+<MyInput ref={ref} />
+```