【React】React19 新增 hooks 优化异步开发体验

初级版： 这几个hook的使用，削弱useEffect的使用？

use
useActionState
useFormStatus
usePotimistic

useDeferredValue 主要用于在处理 UI 更新时，通过延迟不重要的更新来提高重要更新的响应速度。对于需要处理用户输入和繁重计算的场景非常有用

use的使用，

1、读取context

和useContext的功能类似，不同的是useContext只能在顶层中调用，而 use 可以在 if 语句中调用

• before

import { MyContext } from './MyContext';

const { value, setValue } = useContext(MyContext);

• after

import { use } from 'react';

const { value, setValue } = use(MyContext);

React 19 也可以在条件语句中调用

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext);
    return <hr className={theme} />;
  }
  return false;
}

2、读取promise

• before

const [message, setMessage] = useState({value: ''})  
const [loading, setLoading] = useState(true)  
  
useEffect(() => {  
    messagePromise().then(res => {  
      console.log(res)  
      setLoading(false)  
      setMessage(res)  
    })  
  }, [])

• after

function Message({ messagePromise }) {
  const content = use(messagePromise);
  return <p>Here is the message: {content}</p>;
}

注意： 1、只能在 hook 或者组件内部调用，否则会报Suspense Exception: This is not a real error!

2、 不能在 try-catch 块中调用 use。可以选择将组件 包装在 ErrorBoundary，或者使用 Promise .catch 方法提供替代值给 use

包装在 ErrorBoundary 组件中

import { use, Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

export function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>
      <Suspense fallback={<p>⌛Downloading message...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  );
}

function Message({ messagePromise }) {
  const content = use(messagePromise);
  return <p>Here is the message: {content}</p>;
}

使用Promise.catch

import { Message } from './message.js';  

export default function App() {  
  const messagePromise = new Promise((resolve, reject) => {  
  reject();  
}).catch(() => {  
 return "no new message found.";  
});  
return (  
 <Suspense fallback={<p>waiting for message...</p>}>  
  <Message messagePromise={messagePromise} />  
 </Suspense>  
);  
}

进阶版：强化并发模式

顶级版： 深入理解React Compiler