"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "接收异步操作，可在异步操作完毕后执行渲染" }), "\n"] }), "\n", _jsx(_components.h3, { id: "基础用法", children: "基础用法" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { use, useEffect, useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "request" }), "(", _jsx(_components.span, { className: "hljs-params" }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "resolve" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-built_in", children: "setTimeout" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "resolve" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"hello\"" }), ");\n }, ", _jsx(_components.span, { className: "hljs-number", children: "2000" }), ");\n });\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Demo" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ promise }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " text = ", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (promise) {\n text = ", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(promise);\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " promise ? ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "{text} world", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), " : ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [promise, setPromise] = useState<", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "> | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ");\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setPromise" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "request" }), "());\n }, []);\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsx(_components.span, { className: "hljs-tag", children: "<>" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Demo" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "promise" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{promise}" }), " />"] }), "\n ", _jsx(_components.span, { className: "hljs-tag", children: "" })] }), "\n );\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "use" }), " 是一个函数，可以接收一个 Promise 对象；返回 Promise 值"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "use" }), " 只能在函数组件或 hook 中使用，可以嵌套在条件语句中"] }), "\n", _jsxs(_components.li, { children: ["如果 Promise 对象处于 pending 状态，", _jsx(_components.code, { children: "use" }), " 会挂起渲染"] }), "\n", _jsxs(_components.li, { children: ["如果 Promise 对象处于 fulfilled 状态，", _jsx(_components.code, { children: "use" }), " 执行渲染"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "配合-suspense", children: "配合 Suspense" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: ["配合 Suspense 可以中断 ", _jsx(_components.code, { children: "use" }), " 挂起的渲染，直至异步完成重新渲染"] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { use, useEffect, useState, ", _jsx(_components.span, { className: "hljs-title class_", children: "Suspense" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "request" }), "(", _jsx(_components.span, { className: "hljs-params" }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "resolve" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-built_in", children: "setTimeout" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "resolve" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"hello\"" }), ");\n }, ", _jsx(_components.span, { className: "hljs-number", children: "2000" }), ");\n });\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Demo" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ promise }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " text = ", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ";\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (promise) {\n text = ", _jsx(_components.span, { className: "hljs-title function_", children: "use" }), "(promise);\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " promise ? ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "{text} world", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), " : ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [promise, setPromise] = useState<", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "> | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ");\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setPromise" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "request" }), "());\n }, []);\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsx(_components.span, { className: "hljs-tag", children: "<>" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Suspense" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fallback" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "<", _jsx(_components.span, { className: "hljs-attr", children: "span" }), ">"] }), "loading", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "}>\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Demo" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "promise" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{promise}" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsx(_components.span, { className: "hljs-tag", children: "" })] }), "\n );\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Suspense" }), " 组件包裹使用 ", _jsx(_components.code, { children: "use" }), " 的组件"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Suspense" }), " 组件接收 ", _jsx(_components.code, { children: "fallback" }), " 属性，表示异步挂起时渲染的内容"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };