• 本文來源: reactjs.org/blog/2018/1…
• LISENCE: Creative Commons Attribution 4.0 International
• 本文采用 中文/英文 對譯(不支援 IE/Edge 瀏覽器), 點選中文即顯示英文原文, 希望能對你的英語有所幫助. 如有錯誤, 歡迎讀者指正
• 譯者: 蔣璇, 就職於 丁香園, 任職 Insight 醫藥資料庫 前端開發. 開源社群熱愛者

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}
複製程式碼

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}
複製程式碼

// Two ways to opt in:

// 1. Part of an app (not final API)
<React.unstable_ConcurrentMode>
  <Something />
</React.unstable_ConcurrentMode>

// 2. Whole app (not final API)
ReactDOM.unstable_createRoot(domNode).render(<App />);
複製程式碼

// React Cache for simple data fetching (not final API)
import {unstable_createResource} from 'react-cache';

// Tell React Cache how to fetch your data
const TodoResource = unstable_createResource(fetchTodo);

function Todo(props) {
  // Suspends until the data is in the cache
  const todo = TodoResource.read(props.id);
  return <li>{todo.title}</li>;
}

function App() {
  return (
    // Same Suspense component you already use for code splitting
    // would be able to handle data fetching too.
    <React.Suspense fallback={<Spinner />}>
      <ul>
        {/* Siblings fetch in parallel */}
        <Todo id="1" />
        <Todo id="2" />
      </ul>
    </React.Suspense>
  );
}

// Other libraries like Apollo and Relay can also
// provide Suspense integrations with similar APIs.
複製程式碼

譯者注:

譯者並不精通英語, 但是深知英語對於程式設計師的重要性, 所以譯者在翻譯的時候保留了英語原文, 希望給你一個原滋原味的閱讀體驗並且能熟悉一些常見的英文.

希望有讀者可以指出我的翻譯錯誤, 感激不盡.

譯文轉載請註明出處