React · Magic_sword2

[TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> 原文鏈接： - [React](https://reactjs.org/docs/react-api.html) - [生命周期](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) - [React Hooks 使用大全](https://mp.weixin.qq.com/s/Qm7BHndYlvsSmNXZqifwcw) - [我們即將和 API 告別](https://mp.weixin.qq.com/s/PlKMxDYiEerfZgciSAPq6w) - [使用TypeScript](https://mp.weixin.qq.com/s/l4sV6nHT7tPsKpLx5bu-6w) - [Batch Update 淺析](https://zhuanlan.zhihu.com/p/28532725) - [React18新特性深入淺出用戶體驗大師—transition](https://cloud.tencent.com/developer/article/1899839) - [React18新特性重構](https://mp.weixin.qq.com/s/ltyI3gokuDjhcu20mEDYBg) ``` 版本：React 作用：Facebook開發用于構建用戶界面的 JavaScript 庫 ``` <br/> # <b style="color:#4F4F4F;">安裝模塊</b> <br/> # <span style="color:#619BE4">Widows</span> ***** npm install react <br/> # <span style="color:#619BE4">Linux</span> ***** npm install react <br/> # <span style="color:#619BE4">引入說明</span> ***** 引入說明 <br/> ### 示例內容 <span style="color:red">1. 瀏覽器</span> ``` <div id="app"></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://unpkg.com/react@latest/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script> <script type="text/babel"> ReactDOM.render( <div> hello </div>, document.querySelector('#app') ) </script> ``` <br/> # <b style="color:#4F4F4F;">react\<React></b> <br/> # <span style="color:#619BE4">*startTransition()</span> ***** 讓你把提供的 fallback 里面的更新標記為 transitions ，這個回調中更新的是不緊急的數據 <br/> # <span style="color:#619BE4">*lazy()</span> ***** 用作代碼組件分割，不支持服務端渲染，服務端渲染建議使用：[loadable-components](https://github.com/gregberge/loadable-components) <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` // 這個組件是動態加載的 const SomeComponent = React.lazy(() => import('./SomeComponent')); ``` <br/> # <span style="color:#619BE4">*memo()</span> ***** 高階組件，用于裝飾函數式組件，類似類組件中的pureComponent，用于性能優化，它適用于函數組件，但不適用于 class 組件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` 第二個參數可以自定義 function MyComponent(props) { /* 使用 props 渲染 */ } function areEqual(prevProps, nextProps) { /* 如果把 nextProps 傳入 render 方法的返回結果與將 prevProps 傳入 render 方法的返回結果一致則返回 true，否則返回 false */ } export default React.memo(MyComponent, areEqual); 與 class 組件中 shouldComponentUpdate() 方法不同的是，如果 props 相等，areEqual 會返回 true；如果 props 不相等，則返回 false。這與 shouldComponentUpdate 方法的返回值相反。 ``` <br/> # <span style="color:#619BE4">~~[aba]-*createFactory()~~</span> ***** 創建一個組件對象 <br/> # <span style="color:#619BE4">*createElement()</span> ***** 創建一個組件對象 <br/> ### 參數說明 <b style="color:#808080;">type:</b> * 類型：字符串 * 默認值：無 * 描述：標簽類型 * 可選值：[ ] <b style="color:#808080;">props:</b> * 類型：對象 * 默認值：無 * 描述：參數對象 * 可選值：[ ] <b style="color:#808080;">children:</b> * 類型：字符串 * 默認值：無 * 描述：子元素 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> <script> ReactDOM.render( React.createElement("div", {id: "hello"}, React.createElement("h1", null, "Hello react"), React.createElement("p", null, "Hello react of p") ), document.getElementById("app") ) </script> ``` <span style="color:red;">2. JSX簡化</span> ``` <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel"> ReactDOM.render( <div> <p>hello app</p> </div>, document.getElementById("app2") ) </script> ``` <br/> # <span style="color:#619BE4">*cloneElement()</span> ***** 以 element 元素為樣板克隆并返回新的 React 元素 <br/> ### 參數說明 <b style="color:#808080;">element:</b> * 類型：字符串 * 默認值：無 * 描述：以 element 元素為樣板克隆并返回新的 React 元素 * 可選值：[ ] <b style="color:#808080;">props:</b> * 類型：對象 * 默認值：無 * 描述：參數對象 * 可選值：[ ] <b style="color:#808080;">children:</b> * 類型：字符串 * 默認值：無 * 描述：子元素 * 可選值：[ ] <br/> # <span style="color:#619BE4">*createContext()</span> ***** 創建一個Context對象，用做跨組件通信 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` const Context = React.createContext<string | null>(null); class Button extends React.Component { static contextType = Context; render() { let color = this.context; return ( <div> <button style={{backgroundColor: color ? color : undefined}}> {this.props.children} </button> <Context.Consumer> { (color2) => ( <input readOnly={true} type="text" value={color2 || ""}/> ) } </Context.Consumer> </div> ); } } class Message extends React.Component { render() { return ( <div> <Button>刪除</Button> </div> ); } } class MessageList extends React.Component { render() { return ( <Context.Provider value={"blue"}> <Message/> </Context.Provider> ); } } ``` <br/> # <span style="color:#619BE4">*createRef()</span> ***** 創建一個能夠通過 ref 屬性附加到 React 元素的 ref <br/> ### 示例內容 <span style="color:red;">1. 獲取組件實例</span> ``` class TrialRef extends React.PureComponent { getButton() { return "this is a button"; } render() { return ( <div> <button>{this.getButton()}</button> </div> ); } } export default function() { const pokerRef = useRef<TrialRef>(null); useEffect(() => { console.log(pokerRef.current?.getButton()); }, []); return ( <div style={{width: "100%"}}> <TrialRef ref={pokerRef} /> </div> ); } ``` <span style="color:red;">2. 獲取原生實例</span> ``` class TrialRef extends React.PureComponent { public btnRef = React.createRef<any>(); componentDidMount() { console.log(this.btnRef); } render() { return ( <div> <button ref={this.btnRef}>按鈕</button> </div> ); } } ``` <br/> # <span style="color:#619BE4">*forwardRef()</span> ***** 創建一個React組件，這個組件能夠將其接受的 ref 屬性轉發到其組件樹下的另一個組件中 <br/> ### 參數說明 <b style="color:#808080;">callback:</b> * 類型：函數 * 默認值：無 * 描述：接收props 和 ref，返回jsx對象 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` const Child = forwardRef(function (props, ref) { console.log(ref.current={a:1}) return (<div>child</div>) }) ``` <br/> # <span style="color:#619BE4">*isValidElement()</span> ***** 驗證對象是否為 React 元素，返回值為 true 或 false <br/> # <span style="color:#619BE4">*useState()</span> ***** 函數式組件專用，處理狀態 <br/> ### 參數說明 <b style="color:#808080;">initstate:</b> * 類型：object | 函數 * 默認值：無 * 描述：初始值或者工廠函數 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useReducer()</span> ***** 函數式組件專用，useState 的替代方案，可以根據返回值進行處理渲染 <br/> ### 參數說明 <b style="color:#808080;">reducer:</b> * 類型：函數 * 默認值：無 * 描述：純函數，接收state，action 返回state * 可選值：[ ] <b style="color:#808080;">initialArg:</b> * 類型：對象 * 默認值：無 * 描述：初始值 * 可選值：[ ] <b style="color:#808080;">init:</b> * 類型：函數 * 默認值：無 * 描述：選填，初始方法 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useCallback()</span> ***** 函數式組件專用，渲染完成后執行回調函數 <br/> ### 參數說明 <b style="color:#808080;">callback:</b> * 類型：函數 * 默認值：無 * 描述：更新或掛載之前回調的函數 * 可選值：[ ] <b style="color:#808080;">array:</b> * 類型：數組 * 默認值：無 * 描述：依賴于那些狀態變化 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useMemo()</span> ***** 在某個依賴項改變時才重新計算 memoized 值 <br/> ### 參數說明 <b style="color:#808080;">callback:</b> * 類型：函數 * 默認值：無 * 描述：更新或掛載之前回調的函數 * 可選值：[ ] <b style="color:#808080;">array:</b> * 類型：數組 * 默認值：無 * 描述：依賴于那些狀態變化 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useEffect()</span> ***** 函數式組件專用，組件[ 掛載或更新之后 ]的hook，可以返回一個函數，在被卸載時執行，與 componentDidMount、componentDidUpdate 不同的是，在瀏覽器完成布局與繪制之后，傳給 useEffect 的函數會延遲調用 <br/> ### 參數說明 <b style="color:#808080;">callback:</b> * 類型：函數 * 默認值：無 * 描述：更新或掛載回調的函數 * 可選值：[ ] <b style="color:#808080;">array:</b> * 類型：數組 * 默認值：無 * 描述：依賴于那些狀態變化 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useLayoutEffect()</span> ***** 與 componentDidMount、componentDidUpdate 的調用階段是一樣的 <br/> # <span style="color:#619BE4">*useInsertionEffect()</span> ***** 該簽名與 useEffect 相同，但它在所有 DOM 突變之前同步觸發 <br/> # <span style="color:#619BE4">*useRef()</span> ***** 函數式組件專用，創建可操作dom <br/> ### 參數說明 <b style="color:#808080;">defaultVal:</b> * 類型：字符串 * 默認值：無 * 描述：初始值，記錄真實dom，或記錄上一次信息 * 可選值：[ ] <br/> # <span style="color:#619BE4">*useImperativeHandle()</span> ***** 讓你在使用 ref 時自定義方法暴露給父組件的實例值 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} ... />; } FancyInput = forwardRef(FancyInput); ``` <br/> # <span style="color:#619BE4">*useContext()</span> ***** 接收一個context對象，用于上下文共享狀態 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` const themes = { light: { foreground: "#000000", background: "#eeeeee" }, dark: { foreground: "#ffffff", background: "#222222" } }; const ThemeContext = React.createContext(themes.light); function App() { return ( <ThemeContext.Provider value={themes.dark}> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar(props) { return ( <div> <ThemedButton /> </div> ); } function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> ); } ``` <br/> # <span style="color:#619BE4">*useTransition()</span> ***** 返回轉換的掛起狀態的有狀態值，以及啟動它的函數 <br/> # <span style="color:#619BE4">*useDeferredValue()</span> ***** 接受一個值并返回該值的新副本，該副本將推遲到更緊急的更新 <br/> # <span style="color:#619BE4">*useId()</span> ***** 用于生成在服務器和客戶端之間穩定的唯一 ID，同時避免注水不匹配 <br/> # <span style="color:#619BE4">*useSyncExternalStore()</span> ***** 推薦用于從外部數據源讀取和訂閱的鉤子 <br/> # <span style="color:#619BE4">*useDebugValue()</span> ***** 用于在 React 開發者工具中顯示自定義 hook 的標簽 <br/> # <b style="color:#4F4F4F;">React.Children</b> <br/> # <span style="color:#619BE4">*map()</span> ***** 在 children 里的每個直接子節點上調用一個函數，并將 this 設置為 thisArg <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` React.Children.map(children, function[(thisArg)]) ``` <br/> # <span style="color:#619BE4">*forEach()</span> ***** 與 React.Children.map() 類似，但它不會返回一個數組 <br/> # <span style="color:#619BE4">*count()</span> ***** 返回 children 中的組件總數量，等同于通過 map 或 forEach 調用回調函數的次數 <br/> # <span style="color:#619BE4">*only()</span> ***** 驗證 children 是否只有一個子節點（一個 React 元素），如果有則返回它，否則此方法會拋出錯誤。 <br/> # <span style="color:#619BE4">*toArray()</span> ***** 將 children 這個復雜的數據結構以數組的方式扁平展開并返回，并為每個子節點分配一個 key <br/> # <b style="color:#4F4F4F;">React.PureComponent</b> <br/> # <b style="color:#4F4F4F;">React.Component</b> <br/> # <span style="color:#619BE4">constructor()</span> ***** 掛載階段，構造函數 <br/> ### 參數說明 <b style="color:#808080;">props:</b> * 類型：對象 * 默認值：無 * 描述：父組件傳遞數據 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red">1. BUS模式思想</span> ``` import axios form 'axios'; import { Spin } from 'antd'; class Loading { constructor () { this.loadingTag = 0; this.subscriptions = []; } add () { this.loadingTag++; this.subscriptions.forEach(f => f(this.loadingTag)); } sub () { this.loadingTag--; this.subscriptions.forEach(f => f(this.loadingTag)); } get () { return this.loadingTag; } subscribe (f) { this.subscriptions.push(f); } } let loadingPublisher = new Loading(); // 對請求進行攔截, 請求之前加一，成功后減一 axios.interceptors.request.use( res => { // 可以添加參數控制是否需要loading狀態 if (res && !res.ignoreLoading) { loadingPublisher.add(); } return res; }, error => { return Promise.reject(error); } ); axios.interceptors.response.use( response => { // 可以添加參數控制是否需要loading狀態 if (response && response.config && !response.config.ignoreLoading) { loadingPublisher.sub(); } else { return response; } }, error => { loadingPublisher.sub(); return Promise.reject(error.response); // 返回接口返回的錯誤信息 } ); //實現loading組件 class YMLoading extends Component { constructor (props) { super(props); this.state = { globalLoading: false }; } componentDidMount () { // 增加訂閱loading狀態更新 loadingPublisher.subscribe((loadingTag)=>{ if (this.state.globalLoading !== !!loadingTag) { this.setState({globalLoading: !!loadingTag}); } }); } render () { return <Spin spinning={this.state.globalLoading} tip= '加載中...' indicator={<img className='loading_spin' src={require('@imgs/loading.png')}/>}/>; } } class App extends Component { render () { return <YMLoading /> } } ``` <span style="color:red">2. 事件完全渲染</span> ``` e.persist() 如果在react中想異步訪問事件屬性（如在setTimeout內），應該在是處理事件時調用 event.persist()，這會從事件池中移除該合成函數并允許對該合成事件的引用被保留下來 ``` <br/> # <span style="color:#619BE4">dangerouslySetInnerHTML</span> ***** 接收一個對象{__html:html}，傳入的字符串不進行解析 <br/> # <span style="color:#619BE4">refs</span> ***** 給組件或者標簽設置ref屬性時，可以坐在refs中獲取，已經被棄用通過createRef()傳遞實例 <br/> ### 示例內容 <span style="color:red">1. 舉例說明</span> ``` class TrialRef extends React.PureComponent { getButton() { return "this is a button"; } componentDidMount() { // eslint-disable-next-line react/no-string-refs console.log(this.refs); } render() { return ( <div> {/* eslint-disable-next-line react/no-string-refs */} <button ref={"btn"}>{this.getButton()}</button> {/* eslint-disable-next-line react/no-string-refs */} <input ref={"inp"} type="text" /> </div> ); } } ``` <br/> # <span style="color:#619BE4">context</span> ***** 獲取傳入的上下文對象，用于狀態共享 <br/> # <span style="color:#619BE4">state</span> ***** 狀態屬性 <br/> # <span style="color:#619BE4">props</span> ***** 父組件傳遞的數據 <br/> # <span style="color:#619BE4">*defaultProps</span> ***** 可以為 Class 組件添加默認 props <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` class CustomButton extends React.Component { // ... } CustomButton.defaultProps = { color: 'blue' }; ``` <br/> # <span style="color:#619BE4">setState()</span> ***** 觸發狀態更新 <br/> ### 參數說明 <b style="color:#808080;">updater:</b> * 類型：對象 * 默認值：無 * 描述：更新的內容 * 可選值：[ ] <b style="color:#808080;">callback:</b> * 類型：函數 * 默認值：無 * 描述：更新后的回調函數函數 * 可選值：[ ] <br/> # <span style="color:#619BE4">forceUpdate()</span> ***** 強制更新，跳過shouldComponentUpdate() <br/> # <span style="color:#619BE4">~~[aba]-componentWillMount()~~</span> ***** 掛載階段 <br/> # <span style="color:#619BE4">~~[aba]-getChildContext()~~</span> ***** 提供context給子孫組件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` import React from 'react'; import propTypes from "prop-types"; import './App.css'; class Button extends React.Component { static contextTypes = {color: propTypes.string}; render() { return ( <button style={{backgroundColor: this.context.color}}> {this.props.children} </button> ); } } class Message extends React.Component { render() { return ( <div> <Button>刪除</Button> </div> ); } } class MessageList extends React.Component { static childContextTypes = {color: propTypes.string}; getChildContext() { return {color: "blue"}; } render() { return ( <Message/> ); } } ``` <br/> # <span style="color:#619BE4">*getDerivedStateFromProps()</span> ***** 替代componentWillMount和componentWillReceiveProps <br/> ### 參數說明 <b style="color:#808080;">props:</b> * 類型：對象 * 默認值：無 * 描述：父組件傳遞數據 * 可選值：[ ] <b style="color:#808080;">stateops:</b> * 類型：對象 * 默認值：無 * 描述：狀態數據 * 可選值：[ ] <br/> # <span style="color:#619BE4">render()</span> ***** 渲染組件 <br/> ### 示例內容 <span style="color:red;">1. 生命周期</span> ``` import 'antd/dist/antd.css' import React, {useState} from 'react'; import ReactDOM from 'react-dom'; import {Form, Input, Button} from 'antd'; class HorizontalLoginForm extends React.Component { static getDerivedStateFromProps(props, state){ console.log("getDerivedStateFromProps"); return props; } getSnapshotBeforeUpdate(prevProps, prevState) { console.log("getSnapshotBeforeUpdate"); return prevProps; } shouldComponentUpdate(nextProps, nextState, nextContext) { console.log("shouldComponentUpdate"); return true; } render() { console.log("render"); return ( <Form layout="inline"> <Form.Item> <Input/> </Form.Item> <Form.Item> <Input/> </Form.Item> <Form.Item> <Button type="primary">Log in</Button> </Form.Item> </Form> ); } componentDidUpdate(prevProps, prevState, snapshot) { console.log("componentDidUpdate"); } componentDidMount() { console.log("componentDidMount"); } componentWillUnmount() { console.log("componentWillUnmount") } } function Parent() { let [val, setVal] = useState(null); return ( <> <HorizontalLoginForm val={val}/> <button onClick={() => { setVal(Date.now()); }}>UPDATE </button> </> ) } ReactDOM.render(<Parent/>, document.getElementById("root")); ``` <br/> # <span style="color:#619BE4">componentDidMount()</span> ***** 掛載階段 <br/> # <span style="color:#619BE4">~~[aba]-componentWillReceiveProps()~~</span> ***** 父組件更新階段 <br/> # <span style="color:#619BE4">shouldComponentUpdate()</span> ***** 組件更新階段，該函數會返回一個布爾值，決定了后續是否執行 render，首次渲染不會調用該函數 <br/> ### 參數說明 <b style="color:#808080;">nextProps:</b> * 類型：對象 * 默認值：無 * 描述：父組件傳遞數據 * 可選值：[ ] <b style="color:#808080;">nextState:</b> * 類型：對象 * 默認值：無 * 描述：狀態數據 * 可選值：[ ] <br/> ### 示例內容 <span style="color:red;">1. 減少重復渲染</span> ``` shouldComponentUpdate(nextProps, nextState) { return nextState.someData !== this.state.someData } ``` <br/> # <span style="color:#619BE4">~~[aba]-componentWillUpdate()~~</span> ***** 組件狀態將更新階段 <br/> # <span style="color:#619BE4">getSnapshotBeforeUpdate()</span> ***** 組件更新階段，render之后，componentWillUpdate之前，該方法返回內容會傳遞給componentDidUpdate方法第三個參數中 <br/> ### 參數說明 <b style="color:#808080;">prevProps:</b> * 類型：對象 * 默認值：無 * 描述：父組件傳遞數據 * 可選值：[ ] <b style="color:#808080;">prevState:</b> * 類型：對象 * 默認值：無 * 描述：狀態數據 * 可選值：[ ] <br/> # <span style="color:#619BE4">componentDidUpdate()</span> ***** 組件狀態更新完畢階段 <br/> ### 參數說明 <b style="color:#808080;">prevProps:</b> * 類型：對象 * 默認值：無 * 描述：父組件傳遞數據 * 可選值：[ ] <b style="color:#808080;">prevState:</b> * 類型：對象 * 默認值：無 * 描述：狀態數據 * 可選值：[ ] <b style="color:#808080;">prevInfo:</b> * 類型：對象 * 默認值：無 * 描述：getSnapshotBeforeUpdate返回內容 * 可選值：[ ] <br/> # <span style="color:#619BE4">componentWillUnmount()</span> ***** 組件卸載階段 <br/> # <span style="color:#619BE4">*getDerivedStateFromError()</span> ***** 錯誤處理，父組件捕獲子組件錯誤 <br/> # <span style="color:#619BE4">componentDidCatch()</span> ***** 錯誤處理 <br/> ### 參數說明 <b style="color:#808080;">error:</b> * 類型：對象 * 默認值：無 * 描述： * 可選值：[ ] <b style="color:#808080;">info:</b> * 類型：對象 * 默認值：無 * 描述： * 可選值：[ ] <br/> # <b style="color:#4F4F4F;">React.StrictMode</b> <br/> # <span style="color:#619BE4">[com]-StrictMode()</span> ***** 不會渲染任何真實的UI。它為其后代元素觸發額外的檢查和警告，同時組件中render方法會渲染兩次，為了避免副作用的影響產生的BUG行為，這個行為只會在開發模式存在 <br/> # <b style="color:#4F4F4F;">React.Fragment</b> <br/> # <span style="color:#619BE4">[com]-Fragment()</span> ***** 組件能夠在不額外創建 DOM 元素的情況下，讓 render() 方法中返回多個元素，你也可以使用其簡寫語法 <></> <br/> # <b style="color:#4F4F4F;">React.SuspenseList</b> <br/> # <span style="color:#619BE4">[com]-SuspenseList()</span> ***** 用于包裹異步加載的組件，提供fallback屬性，用于無法加載時的顯示 <br/> # <b style="color:#4F4F4F;">React.Suspense</b> <br/> # <span style="color:#619BE4">[com]-Suspense()</span> ***** 用于包裹異步加載的組件，提供fallback屬性，用于無法加載時的顯示 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` // 該組件是動態加載的 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( // 顯示 <Spinner> 組件直至 OtherComponent 加載完成 <React.Suspense fallback={<Spinner />}> <div> <OtherComponent /> </div> </React.Suspense> ); } ``` <br/> # <b style="color:#4F4F4F;">React.Profiler</b> <br/> # <span style="color:#619BE4">[com]-Profiler()</span> ***** react組件渲染分析器組件 <br/>