-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs__myblog__frame__reacthook探索.md.js
More file actions
1 lines (1 loc) · 24.9 KB
/
docs__myblog__frame__reacthook探索.md.js
File metadata and controls
1 lines (1 loc) · 24.9 KB
1
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[62],{Slnw:function(e,n,t){e.exports=t.p+"static/react-useref.705c3719.png"},"tG+p":function(e,n,t){"use strict";t.r(n);var a=t("q1tI"),l=t.n(a),c=t("dEAq"),o=t("H1Ra"),r=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h1",{id:"react-hooks-\u63a2\u7d22"},l.a.createElement(c["AnchorLink"],{to:"#react-hooks-\u63a2\u7d22","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"React Hooks \u63a2\u7d22"),l.a.createElement("h2",{id:"\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528-react-hooks"},l.a.createElement(c["AnchorLink"],{to:"#\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528-react-hooks","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528 React hooks?"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"16.8 \u7248\u672c\u4e4b\u540e\u53ef\u4ee5\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u4f7f\u7528 ",l.a.createElement("code",null,"state"),",",l.a.createElement("code",null,"hook")," \u5c31\u76f8\u5f53\u4e8e\u94a9\u5b50\uff0c")),l.a.createElement("li",null,l.a.createElement("p",null,"\u53ef\u4ee5\u4f7f\u6211\u4eec\u5728\u975e ",l.a.createElement("code",null,"class")," \u7684\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4f7f\u7528\u66f4\u591a\u7684 ",l.a.createElement("code",null,"react")," \u7279\u6027")),l.a.createElement("li",null,l.a.createElement("p",null,"\u4e0d\u7528\u975e\u5f97\u628a ",l.a.createElement("code",null,"class")," \u7ec4\u4ef6\u6539\u6210 hooks \u5199\u6cd5")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"hooks")," \u4ee3\u7801\u66f4\u52a0\u7b80\u6d01\uff0c\u4e0a\u624b\u66f4\u52a0\u7b80\u5355")),l.a.createElement("li",null,l.a.createElement("p",null,"\u751f\u547d\u5468\u671f\u4e0d\u7528\u5b66")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"redux")," ",l.a.createElement("code",null,"\u4e5f\u4e0d\u662f\u5fc5\u9700\u54c1\uff0cmobx")," \u4e0a\u624b\u975e\u5e38\u5bb9\u6613")),l.a.createElement("li",null,l.a.createElement("p",null,"\u5f00\u53d1\u4f53\u9a8c\u6bd4\u8f83\u597d\uff0c\u53ef\u4ee5\u8ba9\u51fd\u6570\u7ec4\u4ef6\u7ef4\u62a4\u5185\u90e8\u72b6\u6001 ",l.a.createElement("code",null,"state")))),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u540c\u6837\u903b\u8f91\u7684\u51fd\u6570\u7ec4\u4ef6\u76f8\u6bd4\u7c7b\u7ec4\u4ef6\u800c\u8a00\uff0c\u590d\u6742\u5ea6\u8981\u4f4e\u5f97\u591a\u5f97\u591a\u3002")),l.a.createElement("h2",{id:"react-\u4e3a\u4ec0\u4e48\u96be\u4e0a\u624b"},l.a.createElement(c["AnchorLink"],{to:"#react-\u4e3a\u4ec0\u4e48\u96be\u4e0a\u624b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"react \u4e3a\u4ec0\u4e48\u96be\u4e0a\u624b\uff1f"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"\u751f\u547d\u5468\u671f\u96be\u4ee5\u7406\u89e3\uff0c\u5f88\u96be\u719f\u7ec3\u5e94\u7528")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"Redux")," \u72b6\u6001\u7ba1\u7406\uff0c\u6982\u5ff5\u975e\u5e38\u591a\uff0c\u96be\u4ee5\u7406\u89e3\uff0c")),l.a.createElement("li",null,l.a.createElement("p",null,"\u9ad8\u9636\u7ec4\u4ef6\u7406\u89e3\u8d77\u6765\u4e0d\u5bb9\u6613\uff0c\u5fc5\u987b\u638c\u63e1")),l.a.createElement("li",null,l.a.createElement("p",null,"\u4f18\u79c0\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u90fd\u5728 ",l.a.createElement("code",null,"react")," \u793e\u533a"))),l.a.createElement("h2",{id:"hooks-\u6838\u5fc3\u6982\u5ff5\u4e0e\u5e94\u7528"},l.a.createElement(c["AnchorLink"],{to:"#hooks-\u6838\u5fc3\u6982\u5ff5\u4e0e\u5e94\u7528","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"Hooks \u6838\u5fc3\u6982\u5ff5\u4e0e\u5e94\u7528"),l.a.createElement("h3",{id:"usestate"},l.a.createElement(c["AnchorLink"],{to:"#usestate","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useState"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u6bcf\u6b21\u6e32\u67d3\uff0c\u51fd\u6570\u90fd\u4f1a\u91cd\u65b0\u6267\u884c\uff0c\u51fd\u6570\u6267\u884c\u5b8c\uff0c\u5185\u5b58\u5c31\u88ab\u91ca\u653e\u6389"),l.a.createElement("li",null,"\u5728\u51fd\u6570\u5185\u90e8\u521b\u5efa\u4e00\u4e2a\u5f53\u524d\u51fd\u6570\u7ec4\u4ef6\u7684\u88c5\u586b\uff0c\u63d0\u4f9b\u4e86\u4e00\u4e2a\u4fee\u6539\u72b6\u6001\u7684\u65b9\u6cd5")),l.a.createElement(o["a"],{code:"//useState\u4f7f\u7528\u7684\u4f8b\u5b50\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const [count, setCount] = useState(1);\n const changeCount = () => {\n setCount(count + 1);\n };\n return (\n <div className=\"App\">\n <p>\u70b9\u51fb\u6b21\u6570\uff1a{count}</p>\n <button onClick={changeCount}>\u52a01</button>\n </div>\n );\n}\n\nexport default App;",lang:"js"}),l.a.createElement("h3",{id:"useeffect"},l.a.createElement(c["AnchorLink"],{to:"#useeffect","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useEffect"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"\u7ec4\u4ef6\u603b\u4f1a\u6267\u884c\u4e00\u4e9b\u526f\u4f5c\u7528\u64cd\u4f5c\uff0c\u51fd\u6570\u7ec4\u4ef6\u4e2d\uff0c\u7eaf\u51fd\u6570\u63a5\u53d7 ",l.a.createElement("code",null,"props"),",\u56fa\u5b9a\u8f93\u5165\u603b\u4f1a\u5f97\u5230\u56fa\u5b9a\u8f93\u51fa")),l.a.createElement("li",null,l.a.createElement("p",null,"\u526f\u4f5c\u7528\uff1a"),l.a.createElement("p",null,"\u53ea\u60f3\u6e32\u67d3\u4e00\u4e2a ",l.a.createElement("code",null,"dom->dom")," \u6e32\u67d3\u5b8c\u4e86\u8fd8\u60f3\u6267\u884c\u4e00\u6bb5\u903b\u8f91(\u526f\u4f5c\u7528)"),l.a.createElement("p",null,l.a.createElement("code",null,"hook"),"\u4e4b\u524d\u526f\u4f5c\u7528\u90fd\u662f\u4e0d\u88ab\u5141\u8bb8\u7684\uff0c\u526f\u4f5c\u7528\u4e5f\u5206\u9700\u8981\u6e05\u9664\u7684\u548c\u4e0d\u9700\u8981\u6e05\u9664\u7684")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"useEffect")," \u662f",l.a.createElement("code",null,"componentDidMount"),"\uff0c",l.a.createElement("code",null,"componentDidUpdate")," \u548c ",l.a.createElement("code",null,"componentWillUnmount")," \u8fd9\u4e09\u4e2a\u51fd\u6570\u7684\u7ec4\u5408")),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"useEffect(fn)"),"\u7ec4\u4ef6\u6e32\u67d3\u5230\u5c4f\u5e55\u4e4b\u540e\u624d\u6267\u884c\uff0c\u8fd4\u56de\u4e00\u4e2a\u6e05\u9664\u526f\u4f5c\u7528\u7684\u51fd\u6570\u6216\u8005\u4e0d\u8fd4\u56de")),l.a.createElement("li",null,l.a.createElement("p",null,"\u4e00\u822c\u662f\u4e0d\u9700\u8981\u540c\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u540c\u6b65\u5219\u4f7f\u7528 ",l.a.createElement("code",null,"useLayoutEffect"))),l.a.createElement("li",null,l.a.createElement("p",null,"\u5b9a\u4e49\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u544a\u8bc9 ",l.a.createElement("code",null,"react")," \u4e0d\u4f9d\u8d56 ",l.a.createElement("code",null,"props"),",",l.a.createElement("code",null,"state")))),l.a.createElement(o["a"],{code:"import React,{useState, useEffect} from 'react';\n\nfunction App() {\n const [count,setCount]=useState(1);\n const changeCount=()=>{\n setCount(count+1)\n }\n /**\n * \u7b2c\u4e00\u79cd \u4e0d\u4f20\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u4e00\u822c\u4e0d\u63a8\u8350\n * \u8fd9\u6837\u4f1a\u5bfc\u81f4useEffect\u53ea\u8981\u6709state\u66f4\u65b0\u5c31\u4f1a\u6267\u884c\uff0c\u5bfc\u81f4\u6027\u80fd\u95ee\u9898\n */\n\n useEffect(()=>{\n console.log('\u6267\u884c')\n document.title='\u4f60\u597d'\n })\n /**\n * \u7b2c\u4e8c\u79cd \u4f20\u7a7a\u6570\u7ec4\n * \u8fd9\u79cd\u5c31\u662f\u76f8\u5f53\u4e8ecomponentDidMount \u53ea\u6267\u884c\u4e00\u6b21\n */\n useEffect(()=>{\n console.log('\u6267\u884c1')\n document.title='\u4f60\u597d1'\n },[])\n /**\n * \u7b2c\u4e09\u79cd \u4f20\u4f9d\u8d56\u66f4\u65b0\u7684\u503c\n * componentDidMount+componentDidUpdate\n */\n useEffect(()=>{\n //count\u53d8\u5316 \u4e0b\u9762\u7684\u4ee3\u7801\u624d\u4f1a\u6267\u884c\n console.log('count',count)\n document.title='\u4f60\u597d1'\n //\u5378\u8f7d\u51fd\u6570\uff0c\u7ec4\u4ef6\n return ()={\n //\u6e05\u9664 \u76f8\u5f53\u4e0ecomponentWillUnmount\n //\u91cc\u9762\u5199\u5378\u8f7d\u7684\u903b\u8f91\n }\n },[count])\n\n\n return (\n <div className=\"App\">\n <p>\u70b9\u51fb\u6b21\u6570\uff1a{count}</p>\n <button onClick={changeCount}>\u52a01</button>\n </div>\n );\n}\n\nexport default App;",lang:"js"}),l.a.createElement("blockquote",null,l.a.createElement("p",null,"\u9996\u5148\u9700\u8981\u8bf4\u660e\uff0c\u6570\u7ec4\u4e2d\u7684\u53d8\u91cf\u4e00\u822c\u90fd\u662f\u6765\u6e90\u4e8e\u7ec4\u4ef6\u672c\u8eab\u7684\u6570\u636e\uff08props \u6216\u8005 state\uff09")),l.a.createElement("h3",{id:"uselayouteffect"},l.a.createElement(c["AnchorLink"],{to:"#uselayouteffect","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useLayoutEffect"),l.a.createElement("p",null,l.a.createElement("code",null,"useEffect")," \u662f\u5f02\u6b65\u7684\uff0c\u8981\u7b49\u5230\u6d4f\u89c8\u5668\u5c06\u6240\u6709\u53d8\u5316\u6e32\u67d3\u5230\u5c4f\u5e55\u540e\u624d\u4f1a\u88ab\u6267\u884c\uff0c",l.a.createElement("code",null,"useLayoutEffect")," \u662f\u540c\u6b65\u7684,\u8fd9\u662f\u6267\u884c\u65f6\u673a\u4e0a\u7684\u533a\u522b"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"useEffect")," \u4e0d\u4f1a\u9020\u6210\u89c6\u89c9\u963b\u585e"),l.a.createElement("li",null,l.a.createElement("code",null,"useLayoutEffect")," \u4f1a\u9020\u6210\u89c6\u89c9\u963b\u585e")),l.a.createElement("h3",{id:"usecontext"},l.a.createElement(c["AnchorLink"],{to:"#usecontext","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useContext"),l.a.createElement("p",null,"\u4f7f\u7528\u4e86 ",l.a.createElement("code",null,"context")," \u80fd\u529b\uff0c\u9876\u5c42\u7684\u7ec4\u4ef6\uff0c\u89e3\u51b3\u7ec4\u4ef6\u4e4b\u95f4\u72b6\u6001\u5171\u4eab\u7684\u95ee\u9898"),l.a.createElement("h3",{id:"usereducer"},l.a.createElement(c["AnchorLink"],{to:"#usereducer","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useReducer"),l.a.createElement("p",null,l.a.createElement("code",null,"useState")," \u5185\u90e8\u5c31\u662f\u9760 ",l.a.createElement("code",null,"useReducer")," \u5b9e\u73b0\u7684,\u63a5\u53d7\u4e09\u4e2a\u53c2\u6570\uff0c",l.a.createElement("code",null,"state")," \u548c\u914d\u5957\u7684 ",l.a.createElement("code",null,"dispatch")),l.a.createElement("h3",{id:"useref"},l.a.createElement(c["AnchorLink"],{to:"#useref","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useRef"),l.a.createElement("p",null,"\u521b\u5efa ",l.a.createElement("code",null,"ref"),",\u8bbf\u95ee ",l.a.createElement("code",null,"dom")," \u8282\u70b9\uff0c\u64cd\u4f5c ",l.a.createElement("code",null,"dom")),l.a.createElement(o["a"],{code:"let refInput=useRef(null)\n\nuseEffect(()=>{\n console.log('refInput',refInput)\n},[])\n\n<input ref={refInput}/>",lang:"js"}),l.a.createElement("h3",{id:"useref-\u548c-createref-\u7684\u533a\u522b"},l.a.createElement(c["AnchorLink"],{to:"#useref-\u548c-createref-\u7684\u533a\u522b","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useRef \u548c createRef \u7684\u533a\u522b\uff1f"),l.a.createElement("p",null,l.a.createElement("code",null,"useRef")," \u5728 react hook \u4e2d\u7684\u4f5c\u7528, \u6b63\u5982\u5b98\u7f51\u8bf4\u7684, \u5b83\u50cf\u4e00\u4e2a\u53d8\u91cf, \u7c7b\u4f3c\u4e8e ",l.a.createElement("code",null,"this")," , \u5b83\u5c31\u50cf\u4e00\u4e2a\u76d2\u5b50, \u4f60\u53ef\u4ee5\u5b58\u653e\u4efb\u4f55\u4e1c\u897f"),l.a.createElement("p",null,l.a.createElement("strong",null,"createRef \u6bcf\u6b21\u6e32\u67d3\u90fd\u4f1a\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u5f15\u7528\uff0c\u800c useRef \u6bcf\u6b21\u90fd\u4f1a\u8fd4\u56de\u76f8\u540c\u7684\u5f15\u7528")),l.a.createElement("p",null,"\u4f8b\u5982\u4e0b\u9762\u7684\u4f8b\u5b50\uff1a"),l.a.createElement(o["a"],{code:"import React, { useState, useRef, createRef } from 'react';\n\nconst App1 = () => {\n const [counter, setCounter] = useState(0);\n const refFromUseRef = useRef();\n const refFromCreateRef = createRef();\n if (!refFromUseRef.current) {\n refFromUseRef.current = counter;\n }\n if (!refFromCreateRef.current) {\n refFromCreateRef.current = counter;\n }\n return (\n <div>\n <p>{counter}</p>\n <p>refFromUseRef:{refFromUseRef.current}</p>\n <p>refFromCreateRef:{refFromCreateRef.current}</p>\n <button onClick={() => setCounter(prev => prev + 1)}>\u70b9\u51fb</button>\n </div>\n );\n};\n\nexport default App1;",lang:"js"}),l.a.createElement("p",null,"\u7ed3\u679c\u5982\u4e0b\uff1a"),l.a.createElement("img",{src:t("Slnw")}),l.a.createElement("p",null,"\u603b\u7ed3\uff1a"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"useRef")," \u4e0d\u4ec5\u4ec5\u662f\u7528\u6765\u7ba1\u7406 DOM ref \u7684\uff0c\u5b83\u8fd8\u76f8\u5f53\u4e8e this , \u53ef\u4ee5\u5b58\u653e\u4efb\u4f55\u53d8\u91cf."),l.a.createElement("li",null,l.a.createElement("code",null,"useRef")," \u53ef\u4ee5\u5f88\u597d\u7684\u89e3\u51b3\u95ed\u5305\u5e26\u6765\u7684\u4e0d\u65b9\u4fbf\u6027. \u4f60\u53ef\u4ee5\u5728\u5404\u79cd\u5e93\u4e2d\u770b\u5230\u5b83\u7684\u8eab\u5f71, \u6bd4\u5982 react-use \u4e2d\u7684 useInterval , usePrevious \u2026\u2026")),l.a.createElement("p",null,l.a.createElement("strong",null,"\u503c\u5f97\u6ce8\u610f\u7684\u662f")," \u5f53 ",l.a.createElement("code",null,"useRef")," \u7684\u5185\u5bb9\u53d1\u751f\u53d8\u5316\u65f6,\u5b83\u4e0d\u4f1a\u901a\u77e5\u60a8\u3002\u66f4\u6539.current \u5c5e\u6027\u4e0d\u4f1a\u5bfc\u81f4\u91cd\u65b0\u5448\u73b0\u3002 \u56e0\u4e3a\u4ed6\u4e00\u76f4\u662f\u4e00\u4e2a\u5f15\u7528"),l.a.createElement("h3",{id:"usememousecallback"},l.a.createElement(c["AnchorLink"],{to:"#usememousecallback","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"useMemo&&useCallback"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"\u76f8\u540c\u70b9"),l.a.createElement("p",null,"\u8fd9\u4e24\u4e2a\u90fd\u662f\u6027\u80fd\u4f18\u5316\u7684\u624b\u6bb5\uff0c\u7c7b\u4f3c\u4e8e\u7ec4\u4ef6\u4e2d\u7684",l.a.createElement("code",null,"shouldComponentUpdate"),",\u5728\u5b50\u7ec4\u4ef6\u4e2d\u4f7f\u7528",l.a.createElement("code",null,"shouldComponentUpdate"),",\u5224\u5b9a\u8be5\u7ec4\u4ef6\u7684",l.a.createElement("code",null,"props"),"\u548c",l.a.createElement("code",null,"state"),"\u662f\u5426\u6709\u53d8\u5316\uff0c\u4ece\u800c\u907f\u514d\u6bcf\u6b21\u7236\u7ec4\u4ef6",l.a.createElement("code",null,"render"),"\u65f6\u90fd\u53bb\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6")),l.a.createElement("li",null,l.a.createElement("p",null,"\u4e0d\u540c\u70b9"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"useMemo"),"\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u503c\uff0c\u7528\u4e8e\u907f\u514d\u5728\u6bcf\u6b21\u6e32\u67d3\u65f6\u90fd\u8fdb\u884c\u9ad8\u5f00\u9500\u7684\u8ba1\u7b97"),l.a.createElement(o["a"],{code:"const Parent = () => {\n const [count, setCount] = useState(0);\n const [color, setColor] = useState('');\n const [price, setPrice] = useState(10);\n const handleClick = () => {\n setCount(count + 1);\n };\n const getTotal = () => {\n console.log('getTotal \u6267\u884c\u4e86 ...'); // \u8be5\u51fd\u6570\u4f9d\u8d56\u4e8ecount\u548cprice\uff0c\u4f46color\u53d8\u5316\u4e5f\u4f1a\u5bfc\u81f4\u8be5\u51fd\u6570\u7684\u6267\u884c\n return count * price;\n };\n //\u6240\u4ee5\u6211\u4eec\u628agetTotal\u51fd\u6570\u4fee\u6539\u4e00\u4e0b\n // \u8fd9\u6837\u5c31\u53ea\u6709count\u548cprice\u6539\u53d8\u7684\u65f6\u5019\uff0cgetTotal\u624d\u4f1a\u6267\u884c\n const getTotal = useMemo(() => {\n console.log('getTotal \u6267\u884c\u4e86 ...');\n return count * price;\n }, [count.price]);\n return (\n <div>\n <div>\n {' '}\n \u989c\u8272: <input onChange={e => setColor(e.target.value)} />\n </div>\n <div>\n {' '}\n \u5355\u4ef7: <input\n value={price}\n onChange={e => setPrice(Number(e.target.value))}\n />\n </div>\n <div>\n {' '}\n \u6570\u91cf:{count} <button onClick={handleClick}>+1</button>\n </div>\n <div>\u603b\u4ef7:{getTotal()}</div>\n </div>\n );\n};",lang:"js"})),l.a.createElement("li",null,l.a.createElement("p",null,l.a.createElement("code",null,"useCallback"),"\u8fd4\u56de\u7684\u662f\u4e00\u4e2a\u51fd\u6570\uff0c",l.a.createElement("strong",null,"\u7528\u4e8e\u7f13\u5b58\u51fd\u6570"),",\u53ea\u6709\u5f53\u4f9d\u8d56\u9879\u6539\u53d8\u65f6\uff0c\u51fd\u6570\u624d\u4f1a\u91cd\u65b0\u6267\u884c\u8fd4\u56de\u65b0\u7684\u51fd\u6570\uff0c\u5bf9\u4e8e\u7236\u7ec4\u4ef6\u4e2d\u7684\u51fd\u6570\u4f5c\u4e3a props \u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u65f6\uff0c\u53ea\u8981\u7236\u7ec4\u4ef6\u6570\u636e\u6539\u53d8\uff0c\u51fd\u6570\u91cd\u65b0\u6267\u884c\uff0c\u4f5c\u4e3a props \u7684\u51fd\u6570\u4e5f\u4f1a\u4ea7\u751f\u65b0\u7684\u5b9e\u4f8b\uff0c\u5bfc\u81f4\u5b50\u7ec4\u4ef6\u7684\u5237\u65b0"))),l.a.createElement("p",null,l.a.createElement("strong",null,"useCallback \u7b2c\u4e8c\u4e2a\u53c2\u6570\u4f9d\u8d56\u9879\u4ec0\u4e48\u60c5\u51b5\u4e0b\u4f7f\u7528\u5462?")),l.a.createElement(o["a"],{code:"const handleInputChange = useCallback(e => {\n setText(e.target.value + count);\n}, []);\n//\u6ca1\u6709\u4f9d\u8d56\u9879\u7684\u65f6\u5019\uff0chandleInputChange\u53ea\u5728\u521d\u59cb\u5316\u7684\u65f6\u5019\u8c03\u7528\u4e00\u6b21\u51fd\u6570\u5c31\u88ab\u7f13\u5b58\u8d77\u6765\n\nconst handleInputChange = useCallback(\n e => {\n setText(e.target.value + count);\n },\n [count],\n);\n//\u6709\u4f9d\u8d56\u9879\u7684\u65f6\u5019\uff0ccount\u52a0\u5165\u5230\u4f9d\u8d56\u9879\uff0ccount\u53d8\u5316\u540e\u91cd\u65b0\u751f\u6210\u65b0\u7684\u51fd\u6570\uff0c\u6539\u53d8\u51fd\u6570\u5185\u90e8\u7684count\u503c",lang:"js"}),l.a.createElement("p",null,l.a.createElement("strong",null,"\u5982\u679c\u8be5\u51fd\u6570\u548c\u53d8\u91cf\u4f5c\u4e3a props \u4f20\u7ed9\u7ec4\u4ef6\uff0c\u8bf7\u4e00\u5b9a\u8981\u7528\uff0c\u907f\u514d\u5b50\u7ec4\u4ef6\u7684\u975e\u5fc5\u8981\u6e32\u67d3")))),l.a.createElement("h3",{id:"\u81ea\u5b9a\u4e49-hook"},l.a.createElement(c["AnchorLink"],{to:"#\u81ea\u5b9a\u4e49-hook","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u81ea\u5b9a\u4e49 Hook"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("p",null,"\u903b\u8f91\u529f\u80fd\u76f8\u540c\u7684\u7247\u6bb5->\u5c01\u88c5\u6210\u5355\u72ec\u7684\u51fd\u6570\u4f7f\u7528")),l.a.createElement("li",null,l.a.createElement("p",null,"\u81ea\u5b9a\u4e49 ",l.a.createElement("code",null,"hook")," \u53ef\u4ee5\u8c03\u7528\u5b98\u65b9\u63d0\u4f9b\u7684 ",l.a.createElement("code",null,"hook"))),l.a.createElement("li",null,l.a.createElement("p",null,"use \u5f00\u5934\uff0c\u8868\u793a\u53ea\u80fd\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u8fdb\u884c\u4f7f\u7528")),l.a.createElement("li",null,l.a.createElement("p",null,"\u62bd\u79bb\u516c\u5171\u4ee3\u7801\uff0c\u6bcf\u6b21\u8c03\u7528\u90fd\u6709\u4e00\u4e2a\u72ec\u7acb\u7684 ",l.a.createElement("code",null,"state")),l.a.createElement(o["a"],{code:"//\u5b9a\u4e49hook\nconst usePrevious = state => {\n const ref = useRef();\n useEffect(() => {\n ref.current = state;\n });\n return ref.current;\n};\n\n//\u4f7f\u7528\nconst prev = usePrevious(counter);",lang:"js"}))),l.a.createElement("h2",{id:"hook-\u4f7f\u7528\u89c4\u5219"},l.a.createElement(c["AnchorLink"],{to:"#hook-\u4f7f\u7528\u89c4\u5219","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"hook \u4f7f\u7528\u89c4\u5219"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u53ea\u80fd\u5728\u6700\u9876\u5c42\u4f7f\u7528 ",l.a.createElement("code",null,"hook"),"\uff0c\u4e0d\u8981\u518d\u5faa\u73af\uff0c\u5d4c\u5957\u51fd\u6570\u4e2d\u8c03\u7528 ",l.a.createElement("code",null,"hook")),l.a.createElement("li",null,"\u53ea\u5728 ",l.a.createElement("code",null,"React")," \u51fd\u6570\u4e2d\u8c03\u7528 ",l.a.createElement("code",null,"hook"))),l.a.createElement("h2",{id:"hooks-\u7684\u5751"},l.a.createElement(c["AnchorLink"],{to:"#hooks-\u7684\u5751","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"hooks \u7684\u5751"),l.a.createElement("h3",{id:"capture-value\u610f\u5916\u7684\u503c"},l.a.createElement(c["AnchorLink"],{to:"#capture-value\u610f\u5916\u7684\u503c","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"capture value\uff08\u610f\u5916\u7684\u503c\uff09"),l.a.createElement(o["a"],{code:"const [age, setAge] = useState(20);\n<button\n onClick={() => {\n setAge(30);\n setTimeout(() => {\n console.log('\u66f4\u65b0', age);\n }, 2000);\n }}\n>\n \u6539\u53d8age\n</button>;",lang:"js"}),l.a.createElement("p",null,"\u4e0a\u8ff0\u4ee3\u7801\u6267\u884c\u7684\u7ed3\u679c\u662f 20 \u8fd8\u662f 30 \u5462\uff0c\u7b54\u6848\u662f 20\uff0c\u4e3a\u4ec0\u4e48\u4e0d\u662f 30 \u5462\uff1f\u56e0\u4e3a setTimeout \u662f\u6709\u4e0a\u4e0b\u6587\u7684\uff0csetAge \u53ea\u4f1a\u4f1a\u5728\u6267\u884c\u4e00\u6b21 App,\u56e0\u4e3a\u6709 setTimeout \u6240\u4ee5 age \u5e76\u4e0d\u4f1a\u88ab\u56de\u6536,\u8fd9\u4e2a\u662f js \u95ed\u5305\u5bfc\u81f4\u7684\uff0c\u4e0d\u662f hooks \u5bfc\u81f4\u7684"),l.a.createElement("h3",{id:"\u6b7b\u5faa\u73af"},l.a.createElement(c["AnchorLink"],{to:"#\u6b7b\u5faa\u73af","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u6b7b\u5faa\u73af"),l.a.createElement("p",null,"\u65ad\u6389\u591a\u91cd\u4f9d\u8d56"),l.a.createElement(o["a"],{code:"//\u8fd9\u6837\u4f1a\u5bfc\u81f4\u6bcf\u6b21\u6267\u884c\u7684\u65f6\u5019\u90fd\u4f1a\u521b\u5efa\u4e00\u4e2achangeCount\uff0c\u6d6a\u8d39\u5185\u5b58\nconst changeCount = () => {\n setCount(count + 1);\n};\n//\u7b2c\u4e00\u6b21\u4f1a\u91cd\u65b0\u521b\u5efa\nconst changeCount = useCallback(() => {\n setCount(count + 1);\n}, [count]);\n\n/**\n * \u6b7b\u5faa\u73af useEffect\u8c03\u7528changeCount,setCount\u6539\u53d8\u4e86count,\n * count\u6539\u53d8\u4e86changeCount\u5c31\u4f1a\u6539\u53d8\uff0c\u5c31\u4f1a\u77e5\u9053useEffect\u6267\u884c\uff0c\u5bfc\u81f4\u9677\u5165\u6b7b\u5faa\u73af\n */\nconst changeCount = useCallback(() => {\n setCount(count + 1);\n}, [count]);\nuseEffect(() => {\n changeCount();\n}, [changeCount]);",lang:"js"}),l.a.createElement("h3",{id:"\u600e\u4e48\u907f\u514d\u5b50\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3"},l.a.createElement(c["AnchorLink"],{to:"#\u600e\u4e48\u907f\u514d\u5b50\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u600e\u4e48\u907f\u514d\u5b50\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3"),l.a.createElement("p",null,"\u4f7f\u7528 ",l.a.createElement("code",null,"React.memo")," \u5305\u88f9\u5b50\u7ec4\u4ef6(\u9ed8\u8ba4\u6267\u884c\u6d45\u6e32\u67d3,\u529f\u80fd\u548c ",l.a.createElement("code",null,"PureComponent")," \u4e00\u6837),",l.a.createElement("code",null,"userCallback")," \u5305\u88f9\u6267\u884c\u65b9\u6cd5\uff0c\u53ea\u7528 ",l.a.createElement("code",null,"useCallback")," \u662f\u4e0d\u884c\u7684\uff0c\u6700\u597d\u662f\u4e24\u8005\u7ed3\u5408"),l.a.createElement(o["a"],{code:"//\u5b50\u7ec4\u4ef6\nimport React, { useState, useEffect } from 'react';\n\nfunction Hello1(props) {\n //\u5305\u88f9\u4e4b\u540e\u8be5\u7ec4\u4ef6\u5c31\u4e0d\u4f1a\u88ab\u89e6\u53d1\n console.log('\u5b50\u7ec4\u4ef6\u66f4\u65b01');\n return <div>\u8fd9\u662f\u5b50\u7ec4\u4ef61</div>;\n}\n\nexport default React.memo(Hello1);",lang:"js"}),l.a.createElement("h3",{id:"\u591a\u4e2a-setnamesetage-\u4f1a\u6267\u884c\u4e24\u6b21"},l.a.createElement(c["AnchorLink"],{to:"#\u591a\u4e2a-setnamesetage-\u4f1a\u6267\u884c\u4e24\u6b21","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u591a\u4e2a setName,setAge \u4f1a\u6267\u884c\u4e24\u6b21"),l.a.createElement("p",null,l.a.createElement("code",null,"class Component"),"\u91cc\u9762",l.a.createElement("code",null,"setState"),"\u591a\u6b21\u4f1a\u6700\u540e\u5408\u6210\u4e00\u6b21\u6765\u6267\u884c\uff0c\u4f46\u662f",l.a.createElement("code",null,"Hooks"),"\u91cc\u9762\u5374\u4e0d\u662f\uff0c\u4ed6\u662f\u6709\u51e0\u6b21\u5c31\u6267\u884c\u51e0\u6b21"),l.a.createElement(o["a"],{code:"//\u6267\u884c\u6279\u5904\u7406\nimport { unstable, unstable_batchedUpdates } from 'react-dom';\n\nunstable_batchedUpdates(() => {\n setCount(23);\n setName('tf');\n});",lang:"js"})))}));n["default"]=e=>{var n=l.a.useContext(c["context"]),t=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(r,{demos:t})}}}]);