docs__myblog__frame__react探索.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[64],{"/lrs":function(e,t,n){"use strict";n.r(t);var l=n("q1tI"),a=n.n(l),c=n("dEAq"),r=n("H1Ra"),u=a.a.memo((e=>{e.demos;return a.a.createElement(a.a.Fragment,null,a.a.createElement("div",{className:"markdown"},a.a.createElement("h1",{id:"react-\u63a2\u7d22"},a.a.createElement(c["AnchorLink"],{to:"#react-\u63a2\u7d22","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"react \u63a2\u7d22"),a.a.createElement("p",null,a.a.createElement("code",null,"react")," \u7075\u6d3b\u6027\u6bd4 ",a.a.createElement("code",null,"vue")," \u597d\uff0c\u5927\u578b\u590d\u6742\u9879\u76ee\u8fd8\u662f\u5efa\u8bae\u4f7f\u7528 ",a.a.createElement("code",null,"react")),a.a.createElement("h2",{id:"reactv168-\u4ee5\u524d"},a.a.createElement(c["AnchorLink"],{to:"#reactv168-\u4ee5\u524d","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React(v16.8 \u4ee5\u524d)"),a.a.createElement("h3",{id:"\u6302\u8f7d\u9636\u6bb5"},a.a.createElement(c["AnchorLink"],{to:"#\u6302\u8f7d\u9636\u6bb5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u6302\u8f7d\u9636\u6bb5"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"construcror")),a.a.createElement("p",null,"\u521d\u59cb\u5316\u64cd\u4f5c state\uff0cthis \u7ed1\u5b9a")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"UNSAFE_componentWillMount")),a.a.createElement("p",null,"\u7ec4\u4ef6\u5373\u5c06\u88ab\u6302\u8f7d\uff0crender \u4e4b\u524d\u8c03\u7528\uff0c\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u5f88\u5c11\u4f7f\u7528\uff0csetState \u4e0d\u4f1a\u5f15\u8d77\u91cd\u65b0\u6e32\u67d3\uff0c\u4f7f\u7528\u540c\u6b65\u7684 setState \u4e0d\u4f1a\u89e6\u53d1\u989d\u5916\u7684 render \u5904\u7406\uff0c\u53ef\u80fd\u4f1a\u4ea7\u751f\u526f\u4f5c\u7528\uff0c\u8ba2\u9605")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"render")),a.a.createElement("p",null,"\u552f\u4e00\u5fc5\u8981\u65b9\u6cd5\uff0c\u8fd4\u56de\u4e00\u4e2a react \u5143\u7d20(state,props),\u4e0d\u8d1f\u8d23\u7ec4\u4ef6\u7684\u5b9e\u9645\u6e32\u67d3\u5de5\u4f5c\uff0c\u53ea\u662f\u8fd4\u56de\u4e00\u4e2a UI \u7684\u63cf\u8ff0"),a.a.createElement("blockquote",null,a.a.createElement("p",null,"\u5fc5\u987b\u662f\u4e00\u4e2a\u7eaf\u51fd\u6570\uff0c\u5728\u8fd9\u91cc\u4e0d\u80fd\u6539\u53d8 state\u3001setState\uff0c\u4e0d\u80fd\u6267\u884c\u4efb\u4f55\u6709\u526f\u4f5c\u7528\u7684\u64cd\u4f5c")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4f5c\u7528\uff1a")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u8ba1\u7b97 props/state \u8fd4\u56de\u5bf9\u5e94\u7684\u7ed3\u679c"),a.a.createElement("li",null,a.a.createElement("code",null,"React.createElement")," jsx \u8f6c\u5316\u4e3a vDOM \u5bf9\u8c61\u6a21\u578b"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"componentDidMount")),a.a.createElement("ol",null,a.a.createElement("li",null,"\u7ec4\u4ef6\u6302\u8f7d\u5230 dom \u540e\u89e6\u53d1\uff0c\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u83b7\u53d6\u5230\u771f\u5b9e\u7684 dom,"),a.a.createElement("li",null,"\u53ef\u4ee5\u5728\u8fd9\u4e2a\u751f\u547d\u5468\u671f\u91cc\u9762\u5411\u670d\u52a1\u7aef\u53d1\u9001\u8bf7\u6c42\uff0c",a.a.createElement("ul",null,a.a.createElement("li",null,"\u53ef\u4ee5\u62a5\u9500\u83b7\u53d6\u5230\u6570\u636e\u65f6\uff0c\u7ec4\u4ef6\u5df2\u7ecf\u5904\u4e8e\u6302\u5728\u72b6\u6001\uff0c\u76f4\u63a5\u64cd\u4f5c dom,\u521d\u59cb\u5316\u7b2c\u4e09\u65b9\u5e93"),a.a.createElement("li",null,"\u53ea\u4f1a\u8c03\u7528\u4e00\u6b21\uff0c\u4e0d\u4f1a\u53d1\u9001\u591a\u4f59\u7684\u6570\u636e"))),a.a.createElement("li",null,"setState \u5f15\u8d77\u7ec4\u5efa\u91cd\u65b0\u6e32\u67d3")))),a.a.createElement("h3",{id:"\u66f4\u65b0\u9636\u6bb5"},a.a.createElement(c["AnchorLink"],{to:"#\u66f4\u65b0\u9636\u6bb5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u66f4\u65b0\u9636\u6bb5"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"componentWillReceiveProps(nextProps)")),a.a.createElement("p",null,"\u53ea\u5728 props \u6539\u53d8\u624d\u4f1a\u5f15\u8d77\u7ec4\u4ef6\u7684\u66f4\u65b0,\u53ea\u8981\u7236\u7ec4\u4ef6\u7684 render \u51fd\u6570\u88ab\u8c03\u7528\uff0c\u65e0\u8bba\u7236\u7ec4\u4ef6\u7684\u4f20\u7ed9\u5b50\u7ec4\u4ef6\u7684 props \u6709\u6ca1\u6709\u6539\u53d8\uff0c\u90fd\u4f1a\u89e6\u53d1 ",a.a.createElement("code",null,"shouldComponentUpdate"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"shouldComponentUpdate")),a.a.createElement("p",null,"\u901a\u77e5\u7ec4\u4ef6\u662f\u5426\u66f4\u65b0\uff0c\u6709\u6743\u5229\u963b\u6b62\u66f4\u65b0\uff0c\u5c3d\u91cf\u9075\u5faa\u9ed8\u8ba4\u884c\u4e3a\uff0c\u72b6\u6001\u6539\u53d8\u7ec4\u4ef6\u5c31\u4f1a\u88ab\u91cd\u65b0\u6e32\u67d3\uff0c\u8981\u6c42\u5fc5\u987b\u6709\u8fd4\u56de\u7ed3\u679c\uff0ctrue \u5c31\u662f\u6e32\u67d3\uff0cfalse \u5c31\u662f\u4e0d\u6e32\u67d3\uff0c",a.a.createElement("strong",null,"\u51cf\u5c11\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3\uff0c\u63d0\u9ad8\u6027\u80fd"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"componentWillUpdate(nextProps,nextState)")),a.a.createElement("p",null,"\u53ef\u4ee5\u4f5c\u4e3a\u7ec4\u4ef6\u66f4\u65b0\u53d1\u751f\u524d\u7684\u6267\u884c\u67d0\u4e9b\u5de5\u4f5c\u7684\u5730\u65b9,\u4e00\u822c\u5f88\u5c11\u7528\uff0c\u4e0d\u80fd\u8c03\u7528 setState")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"render"))),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"conponentDidUpdate(preProps,preState)")),a.a.createElement("p",null,"\u66f4\u65b0\u5b8c\u6210\u8c03\u7528\uff0c\u6709\u673a\u4f1a\u6765\u64cd\u4f5c dom,\u5224\u65ad\u662f\u5426\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\uff0c\u5f88\u5bb9\u6613\u9020\u6210\u6b7b\u5faa\u73af"))),a.a.createElement("h3",{id:"\u5378\u8f7d\u9636\u6bb5"},a.a.createElement(c["AnchorLink"],{to:"#\u5378\u8f7d\u9636\u6bb5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u5378\u8f7d\u9636\u6bb5"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"componentWillUnmount")),a.a.createElement("p",null,"\u53d6\u6d88\u7f51\u7edc\u8bf7\u6c42\uff0c\u5378\u8f7d\u5b9a\u65f6\u5668\uff0c\u79fb\u9664\u4e8b\u4ef6\u76d1\u542c\u7b49"))),a.a.createElement("h3",{id:"\u9519\u8bef\u5904\u7406\u9636\u6bb5"},a.a.createElement(c["AnchorLink"],{to:"#\u9519\u8bef\u5904\u7406\u9636\u6bb5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u9519\u8bef\u5904\u7406\u9636\u6bb5"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"componentDidCatch(err,info)"))),a.a.createElement("h2",{id:"reactv168-\u4ee5\u540e"},a.a.createElement(c["AnchorLink"],{to:"#reactv168-\u4ee5\u540e","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"React(v16.8 \u4ee5\u540e)"),a.a.createElement("p",null,"\u4e3a\u4ec0\u4e48\u8981\u4f7f\u7528\uff1f\u4ee3\u7801\u66f4\u52a0\u7b80\u6d01\uff0c\u4e0a\u624b\u66f4\u52a0\u7b80\u5355\uff0c\u5f00\u53d1\u4f53\u9a8c\u6bd4\u8f83\u597d"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useState")," \u5728\u51fd\u6570\u7ec4\u4ef6\u5185\u90e8\u521b\u5efa\u4e86\u4e00\u4e2a\u5f53\u524d\u51fd\u6570\u7ec4\u4ef6\u7684\u88c5\u586b\uff0c\u5e76\u4e14\u63d0\u4f9b\u4e86\u53ef\u4fee\u6539\u7684\u65b9\u6cd5"),a.a.createElement(r["a"],{code:"//useState\u53ef\u4ee5\u63a5\u53d7\u4efb\u610f\u7c7b\u578b\nuseState(() => {\n  //\u5904\u7406\u903b\u8f91\n  return;\n});",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useEffect")," \u603b\u4f1a\u6267\u884c\u4e00\u4e9b\u526f\u4f5c\u7528\u64cd\u4f5c"))),a.a.createElement(r["a"],{code:"//\u76f8\u5f53\u4e8ecomponentDidMount ,componentDidUpdate,componentWillUnmount,\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662freact\u7684\u4f9d\u8d56props,state\nuseEffect(() => {\n  //\u76f8\u5f53\u4e8e\u5378\u8f7d\n  function clear() {}\n  return clear;\n}, []);\n//\u4e00\u822c\u662f\u4e0d\u9700\u8981\u540c\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u540c\u6b65\u4f7f\u7528userLayoutEffect",lang:"js"}),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useContext")," \u89e3\u51b3\u7237\u5b59\u4e4b\u95f4\u4f20\u503c,\u89e3\u51b3\u7ec4\u4ef6\u4e4b\u95f4\u72b6\u6001\u5171\u4eab\u95ee\u9898"),a.a.createElement(r["a"],{code:"import React, {\n  useState,\n  useMemo,\n  useCallback,\n  createContext,\n  useContext,\n} from 'react';\nimport './style.css';\n\nconst context = createContext({});\n\n//\u9876\u5c42\u7ec4\u4ef6\nfunction ContextProbider({ children }) {\n  const [count, setCount] = useState(10);\n  const constVal = {\n    count,\n    setCount,\n    add: () => setCount(count + 1),\n    reduce: () => setCount(count - 1),\n  };\n  //context\u63d0\u4f9b\u4e00\u4e2a\u81ea\u5e26\u7684provider\u7684\u5c5e\u6027\n  return <context.Provider value={constVal}>{children}</context.Provider>;\n}\n\n//\u5b50\u7ec4\u4ef6\nconst ChildComponent = React.memo(() => {\n  const { count = 0, add } = useContext(context);\n  return <div onClick={add}>\u8fd9\u662f\u5b50\u7ec4\u4ef6{count}</div>;\n});\n\nexport default function App() {\n  return (\n    <div>\n      <ContextProbider>\n        <ChildComponent />\n      </ContextProbider>\n    </div>\n  );\n}",lang:"js"}),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"useReducer")," useState \u5185\u90e8\u5c31\u662f\u6839\u636e useReducer \u6765\u5b9e\u73b0\u7684\uff0cuseState \u7684\u66ff\u4ee3\u65b9\u6848")),a.a.createElement(r["a"],{code:"import React, {\n  useState,\n  useMemo,\n  useCallback,\n  createContext,\n  useContext,\n  useReducer,\n} from 'react';\nimport './style.css';\n\n//\u5b9a\u4e49\u7b80\u5355\u7684reducer \u7b2c\u4e00\u4e2a\u53c2\u6570\nconst reducer = (state, action) => {\n  switch (action.type) {\n    case 'add':\n      return { ...state, count: state.count + 1 };\n    case 'reduce':\n      return { ...state, count: state.count - 1 };\n    default:\n      return state;\n  }\n};\n//\u5b9a\u4e49\u7b2c\u4e8c\u4e2a\u53c2\u6570createStore() \u9ed8\u8ba4\u503c\nlet initState = {\n  count: 10,\n  name: '111',\n};\n//\u5b9a\u4e49\u7b2c\u4e09\u4e2a\u53c2\u6570 \u51fd\u6570\uff0c\u4f1a\u628a\u7b2c\u4e8c\u4e2a\u53c2\u6570\u5f53\u505a\u53c2\u6570\u6267\u884c\nconst init = initCount => {\n  return { ...initCount };\n};\n\nfunction App() {\n  const [state, dispath] = useReducer(reducer, initState, init);\n  console.log(state);\n  return <div onClick={() => dispath({ type: 'add' })}>{state.count}</div>;\n}\nexport default App;",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useRef")," \u64cd\u4f5c dom")),a.a.createElement("li",null,a.a.createElement("p",null,a.a.createElement("code",null,"useMemo")," \u548c ",a.a.createElement("code",null,"useCallback")),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"useMemo")," \u8ba1\u7b97\u7ed3\u679c\u662f return \u56de\u6765\u7684\u503c, \u4e3b\u8981\u7528\u4e8e\u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c\u7684\u503c ,\u5e94\u7528\u573a\u666f\u5982: \u9700\u8981\u8ba1\u7b97\u7684\u72b6\u6001"),a.a.createElement("li",null,a.a.createElement("code",null,"useCallback")," \xa0 \u8ba1\u7b97\u7ed3\u679c\u662f\u51fd\u6570, \u4e3b\u8981\u7528\u4e8e\u7f13\u5b58\u51fd\u6570\uff0c\u5e94\u7528\u573a\u666f\u5982: \u9700\u8981\u7f13\u5b58\u7684\u51fd\u6570\uff0c\u56e0\u4e3a\u51fd\u6570\u5f0f\u7ec4\u4ef6\u6bcf\u6b21\u4efb\u4f55\u4e00\u4e2a state \u7684\u53d8\u5316 \u6574\u4e2a\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u91cd\u65b0\u5237\u65b0\uff0c\u4e00\u4e9b\u51fd\u6570\u662f\u6ca1\u6709\u5fc5\u8981\u88ab\u91cd\u65b0\u5237\u65b0\u7684\uff0c\u6b64\u65f6\u5c31\u5e94\u8be5\u7f13\u5b58\u8d77\u6765\uff0c\u63d0\u9ad8\u6027\u80fd\uff0c\u548c\u51cf\u5c11\u8d44\u6e90\u6d6a\u8d39")),a.a.createElement(r["a"],{code:"//memo \u76f8\u5f53\u4e8e\u7eaf\u51fd\u6570 \u9632\u6b62\u7236\u7ec4\u4ef6\u66f4\u65b0\u5bfc\u81f4\u5b50\u7ec4\u4ef6\u4e5f\u505a\u4e00\u4e9b\u65e0\u5173\u7684\u66f4\u65b0, \u548cPureComponent\u7684\u529f\u80fd\u76f8\u4f3c\n//useMemo \u7c7b\u4f3c\u4e8ememo,\u4f46\u662f\u5bf9\u51fd\u6570\u6709\u66f4\u5f3a\u7684\u5c01\u88c5 \u8fd4\u56de\u7684\u662f\u7ed3\u679c\n//useCallback \u4e13\u95e8\u5c01\u88c5\u51fd\u6570 \u9632\u6b62\u51fd\u6570\u7684\u91cd\u590d\u5b9a\u4e49\u5bfc\u81f4\u5b50\u7ec4\u4ef6\u6ca1\u6709\u5fc5\u8981\u7684\u52a0\u8f7d,\u8fd4\u56de\u7684\u662f\u51fd\u6570",lang:"js"})),a.a.createElement("li",null,a.a.createElement("p",null,"\u81ea\u5b9a\u4e49 hook:\u53ef\u4ee5\u8c03\u7528\u5b98\u65b9\u7684 hook"))),a.a.createElement(r["a"],{code:"import React, { useState, useEffect } from 'react';\n// \u5982\u4f55\u6a21\u62df\u6570\u636e\u63a5\u53e3\u8bf7\u6c42\u529f\u80fd\nexport default function useLoadData() {\n  const [num, setNum] = useState(0);\n  useEffect(() => {\n    setTimeout(() => {\n      console.log('rrr');\n      setNum(2);\n    }, 1000);\n  }, []);\n\n  return [num, setNum];\n}\n//\u4f7f\u7528\nconst [num, setNum] = useLoadData();",lang:"js"}),a.a.createElement("h2",{id:"\u865a\u62df-dom"},a.a.createElement(c["AnchorLink"],{to:"#\u865a\u62df-dom","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u865a\u62df DOM"),a.a.createElement("p",null,"\u865a\u62df DOM\uff08Virtual DOM\uff09\u672c\u8d28\u4e0a\u662f JS \u548c DOM \u4e4b\u95f4\u7684\u4e00\u4e2a\u6620\u5c04\u7f13\u5b58\uff0c\u5b83\u5728\u5f62\u6001\u4e0a\u8868\u73b0\u4e3a\u4e00\u4e2a\u80fd\u591f\u63cf\u8ff0 DOM \u7ed3\u6784\u53ca\u5176\u5c5e\u6027\u4fe1\u606f\u7684 JS \u5bf9\u8c61"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u865a\u62df DOM",a.a.createElement("ul",null,a.a.createElement("li",null,"\u865a\u62df DOM \u662f JS \u5bf9\u8c61"),a.a.createElement("li",null,"\u865a\u62df DOM \u662f\u5bf9\u771f\u5b9e DOM \u7684\u63cf\u8ff0"),a.a.createElement("li",null,"\u865a\u62df DOM \u7684\u4f18\u8d8a\u4e4b\u5904\u5728\u4e8e\uff0c\u5b83\u80fd\u591f\u5728\u63d0\u4f9b\u66f4\u723d\u3001\u66f4\u9ad8\u6548\u7684\u7814\u53d1\u6a21\u5f0f\uff08\u4e5f\u5c31\u662f\u51fd\u6570\u5f0f\u7684 UI \u7f16\u7a0b\u65b9\u5f0f\uff09\u7684\u540c\u65f6\uff0c\u4ecd\u7136\u4fdd\u6301\u4e00\u4e2a\u8fd8\u4e0d\u9519\u7684\u6027\u80fd"),a.a.createElement("li",null,"\u865a\u62df dom:\u6279\u5904\u7406\uff0c\u4f7f\u7528 diff \u7b97\u6cd5\uff0c\u5c3d\u53ef\u80fd\u5c11\u7684\u64cd\u4f5c dom,\u63d0\u9ad8\u6e32\u67d3\u6548\u7387"))),a.a.createElement("li",null,"\u771f\u5b9e DOM:\u64cd\u4f5c\u9891\u7e41\u5f71\u54cd\u6027\u80fd")),a.a.createElement("p",null,a.a.createElement("strong",null,"\u4f18\u70b9\uff1a")),a.a.createElement("ul",null,a.a.createElement("li",null,"\u865a\u62df DOM \u4e3b\u8981\u6709\u6279\u5904\u7406\u548c diff \u7b97\u6cd5\uff0c"),a.a.createElement("li",null,"\u51cf\u5c11 DOM \u64cd\u4f5c\uff0c\u63d0\u9ad8\u6e32\u67d3\u6548\u7387"),a.a.createElement("li",null,"\u63d0\u9ad8\u4e86\u7814\u53d1\u4f53\u9a8c/\u7814\u53d1\u6548\u7387\u7684\u95ee\u9898"),a.a.createElement("li",null,"\u89e3\u51b3\u4e86\u8de8\u5e73\u53f0\u7684\u95ee\u9898"),a.a.createElement("li",null,"\u6279\u91cf\u66f4\u65b0")),a.a.createElement("h3",{id:"dom-\u64cd\u4f5c"},a.a.createElement(c["AnchorLink"],{to:"#dom-\u64cd\u4f5c","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"DOM \u64cd\u4f5c"),a.a.createElement("p",null,"\u64cd\u4f5c\u6210\u672c\u9ad8\uff0c\u5927\u91cf\u7684\u8ba1\u7b97\u5bfc\u81f4\u4e0d\u505c\u7684\u91cd\u7ed8\u548c\u91cd\u6392\uff0c\u5bfc\u81f4\u6027\u80fd\u53d8\u4f4e"),a.a.createElement("h3",{id:"\u975e-dom-\u5c5e\u6027\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528"},a.a.createElement(c["AnchorLink"],{to:"#\u975e-dom-\u5c5e\u6027\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u975e DOM \u5c5e\u6027\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"dangerousSetInnerHtml")," \u53ef\u80fd\u4f1a\u5bfc\u81f4\u5b89\u5168\u95ee\u9898"),a.a.createElement("li",null,"ref \u901a\u8fc7 ref \u76d1\u89c6 DOM \u5143\u7d20\uff0c\u4e0d\u80fd\u5728\u51fd\u6570\u7ec4\u4ef6\u4f7f\u7528\uff0c\u53ea\u80fd\u5728 class \u7ec4\u4ef6\u4f7f\u7528\uff0c\u62ff\u5230\u5b50\u7ec4\u4ef6\u7684\u5c5e\u6027"),a.a.createElement("li",null,"key \u63d0\u9ad8\u6e32\u67d3\u6027\u80fd\uff0c\u5e2e\u52a9 diff \u7b97\u6cd5\u8bc6\u522b\u54ea\u4e9b\u5143\u7d20\u6539\u53d8\u4e86\uff0c\u4e0d\u8981\u4f7f\u7528 index \u4f5c\u4e3a key \u503c")),a.a.createElement("h2",{id:"setstate-\u4f1a\u7acb\u9a6c\u66f4\u65b0\u6570\u636e\u5417"},a.a.createElement(c["AnchorLink"],{to:"#setstate-\u4f1a\u7acb\u9a6c\u66f4\u65b0\u6570\u636e\u5417","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"setState \u4f1a\u7acb\u9a6c\u66f4\u65b0\u6570\u636e\u5417\uff1f"),a.a.createElement("p",null,"\u4e0d\u4f1a\uff0c\u56e0\u4e3a setState \u662f\u5f02\u6b65\u7684\uff0c\u6279\u91cf\u5ef6\u8fdf\u66f4\u65b0\uff0c\u591a\u4e2a setState \u8c03\u7528\u4f1a\u5408\u5e76\u6267\u884c\u4e00\u6b21\uff0c\u56e0\u4e3a setState \u7684\u6267\u884c\u987a\u5e8f\u662f\u653e\u5728\u4e00\u4e2a\u961f\u5217\u91cc\u9762\u7684\uff0c\u5728\u4e00\u5b9a\u7684\u65f6\u95f4\u5185\u4f1a\u7edf\u4e00\u5904\u7406"),a.a.createElement("p",null,"\u5f02\u6b65\u7684\u4e3b\u8981\u662f\u5728\uff1a",a.a.createElement("code",null,"onClick"),"\u3001",a.a.createElement("code",null,"onChange"),",\u751f\u547d\u5468\u671f\u4e2d\u4e0d\u4f1a\u540c\u6b65\u66f4\u65b0"),a.a.createElement(r["a"],{code:"//\u57fa\u4e8e\u5f53\u524dstate\u8ba1\u7b97\uff0c\u8fd9\u6837\u8c03\u7528\u80fd\u4fdd\u8bc1\u62ff\u5230\u7684state\u662f\u6700\u65b0\u7684\n//\u5bf9\u8c61\u7684\u8c03\u7528\u65b9\u5f0f\u4e0d\u80fd\u4fdd\u6301\u6700\u65b0\uff0c\u53ea\u80fd\u5728setState\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u91cc\u9762\u6267\u884c\u51fd\u6570\nthis.setState(state => {\n  count: state.count++;\n});",lang:"js"}),a.a.createElement("p",null,"\u540c\u6b65\u66f4\u65b0\u4e3b\u8981\u662f\u5728\uff1a\u539f\u751f ",a.a.createElement("code",null,"js"),"\u7ed1\u5b9a\u4e8b\u4ef6\uff0c",a.a.createElement("code",null,"setTimeout")),a.a.createElement("h2",{id:"\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6"},a.a.createElement(c["AnchorLink"],{to:"#\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u53d7\u63a7\u7ec4\u4ef6\u548c\u975e\u53d7\u63a7\u7ec4\u4ef6"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u53d7\u63a7\u7ec4\u4ef6\uff1a\u4f9d\u8d56\u72b6\u6001\uff0c\u9ed8\u8ba4\u503c\u5b9e\u65f6\u6620\u5c04\u5230\u72b6\u6001 state,\u5fc5\u987b\u4f7f\u7528 onChange \u4e8b\u4ef6\uff0c\u7c7b\u4f3c\u4e8e\u53cc\u5411\u7ed1\u5b9a\uff0c\u6bd4\u5982\u8868\u5355\u5143\u7d20"),a.a.createElement("li",null,"\u975e\u53d7\u63a7\u7ec4\u4ef6\uff1a\u4e0d\u53d7\u63a7\u5236\uff0c\u64cd\u4f5c dom \u4f7f\u7528 ref,\u5f88\u5bb9\u6613\u4e8e\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u7ed3\u5408")),a.a.createElement("h2",{id:"react-router"},a.a.createElement(c["AnchorLink"],{to:"#react-router","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"react router"),a.a.createElement("p",null,"\u7248\u672c\uff1av2\u3001v3\u3001v4\u3001v5,v4/v5 \u7528\u6cd5\u548c\u7406\u5ff5\u57fa\u672c\u4e00\u81f4\uff0cv2/v3 \u5dee\u5f02\u6bd4\u8f83\u5927"),a.a.createElement("p",null,"v4 \u4e0e v4 \u4e4b\u524d\u7684\u6bd4\u8f83\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,"v4 \u5c5e\u4e8e\u7a33\u5b9a\u7248\u672c\uff0c\u5927\u591a\u6570\u9879\u76ee\u4f7f\u7528\uff0c\u5c5e\u4e8e\u52a8\u6001\u8def\u7531",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"react-router")," \u8def\u7531\u5e93"),a.a.createElement("li",null,a.a.createElement("code",null,"react-router-dom")," \u9002\u7528\u4e8e\u6d4f\u89c8\u5668\u73af\u5883\u7684\u518d\u5c01\u88c5"),a.a.createElement("li",null,a.a.createElement("code",null,"react-router-native")," \u9002\u7528\u4e8e react-native \u73af\u5883"),a.a.createElement("li",null,a.a.createElement("code",null,"react-router-config")," \u9759\u6001\u8def\u7531\u914d\u7f6e\u52a9\u624b"))),a.a.createElement("li",null,"\u4e4b\u524d\uff1a\u9759\u6001\u8def\u7531")),a.a.createElement("p",null,"v5 \u4e0e v4 \u7684\u6bd4\u8f83\uff1a"),a.a.createElement("ul",null,a.a.createElement("li",null,"v5 \u5b8c\u5168\u517c\u5bb9 v4,\u652f\u6301 react16\uff0c\u517c\u5bb9 react\uff0c\u6d88\u9664\u4e86\u4e25\u683c\u6a21\u5f0f\u7684\u8b66\u544a\uff0c\u9002\u7528 ",a.a.createElement("code",null,"create-react-context")," \u5b9e\u73b0 ",a.a.createElement("code",null,"context api")),a.a.createElement("li",null,"\u7a33\u5b9a\u6027\u548c\u517c\u5bb9\u6027\uff0c\u6539\u8fdb\u4e0e\u65b0\u7279\u6027")),a.a.createElement("h3",{id:"\u524d\u7aef\u8def\u7531"},a.a.createElement(c["AnchorLink"],{to:"#\u524d\u7aef\u8def\u7531","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"\u524d\u7aef\u8def\u7531"),a.a.createElement("p",null,"\u539f\u7406\uff1a\u68c0\u6d4b\u6d4f\u89c8\u5668 url \u8def\u5f84\u7684\u53d8\u5316\uff0c\u622a\u83b7 url \u5730\u5740\uff0c\u8fdb\u884c url \u5730\u5740\u5339\u914d"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("p",null,"hash:\u951a\u70b9 ",a.a.createElement("code",null,"hashchange"),"\uff0c\u9875\u9762\u5237\u65b0\u7684\u65f6\u5019\u4e0d\u4f1a\u5411\u540e\u7aef\u53d1\u9001\u8bf7\u6c42")),a.a.createElement("li",null,a.a.createElement("p",null,"html5:",a.a.createElement("code",null,"histry")," \u9875\u9762\u5237\u65b0\u7684\u65f6\u5019\u4f1a\u5411\u540e\u7aef\u53d1\u9001\u8bf7\u6c42",a.a.createElement("code",null,"pushState"),",",a.a.createElement("code",null,"replaceState"),",",a.a.createElement("code",null,"onpopstate\u4e8b\u4ef6")))),a.a.createElement("h3",{id:"react-router-\u5e38\u89c1\u6982\u5ff5"},a.a.createElement(c["AnchorLink"],{to:"#react-router-\u5e38\u89c1\u6982\u5ff5","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"react router \u5e38\u89c1\u6982\u5ff5"),a.a.createElement("ul",null,a.a.createElement("li",null,"Router \u7ec4\u4ef6\uff1a \u6bcf\u4e2a Router \u90fd\u4f1a\u521b\u5efa\u4e00\u4e2a history \u5bf9\u8c61\uff0c\u7528\u6765\u4fdd\u6301\u5f53\u524d\u4f4d\u7f6e\u7684\u8ffd\u8e2a",a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"web"),":",a.a.createElement("code",null,"hashRouter")," \u53ea\u5904\u7406\u9759\u6001 url,",a.a.createElement("code",null,"BrowerRouter")," \u975e\u9759\u6001\u7684\u7ad9\u70b9\uff0c\u8981\u5904\u7406\u4e0d\u540c\u7684 url,",a.a.createElement("code",null,"react native"),":memeryRouter"))),a.a.createElement("li",null,"Route \u7ec4\u4ef6\uff1a\u53ea\u662f\u4e00\u4e2a\u5177\u6709\u6e32\u67d3\u65b9\u6cd5\u7684\u666e\u901a react \u7ec4\u4ef6\uff0c\u8def\u7531\u5339\u914d\u6210\u529f\u6e32\u67d3\u8be5\u7ec4\u4ef6")),a.a.createElement("h2",{id:"redux-\u6d41\u7a0b"},a.a.createElement(c["AnchorLink"],{to:"#redux-\u6d41\u7a0b","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"redux \u6d41\u7a0b"),a.a.createElement("p",null,"js \u72b6\u6001\u5bb9\u5668\uff0c\u63d0\u4f9b\u53ef\u9884\u6d4b\u5316\u7684\u72b6\u6001\u7ba1\u7406\uff0c",a.a.createElement("code",null,"dispacth")," \u89e6\u53d1 ",a.a.createElement("code",null,"action")," \u7136\u540e\u89e6\u53d1 ",a.a.createElement("code",null,"reducer")," \u5b8c\u6210 ",a.a.createElement("code",null,"state")," \u7684\u66f4\u65b0"),a.a.createElement("ul",null,a.a.createElement("li",null,a.a.createElement("code",null,"action"),"\uff1a\u53d1\u51fa\u4e86\u4ec0\u4e48\u884c\u4e3a\uff0c\u52a8\u4f5c"),a.a.createElement("li",null,a.a.createElement("code",null,"reducer"),":\u4e3a\u4e86\u63cf\u8ff0 action \u5982\u4f55\u6539\u53d8 state \u6811"),a.a.createElement("li",null,a.a.createElement("code",null,"store"),":\u4ed3\u5e93")),a.a.createElement("h3",{id:"redux-\u7684\u597d\u5904"},a.a.createElement(c["AnchorLink"],{to:"#redux-\u7684\u597d\u5904","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"redux \u7684\u597d\u5904"),a.a.createElement("p",null,"\u5355\u5411\u6570\u636e\u6d41\uff0c\u89e3\u51b3\u591a\u7ea7\u7ec4\u4ef6\u3001\u76f8\u90bb\u7ec4\u4ef6\u4f20\u9012\u7684\u95ee\u9898"),a.a.createElement("h3",{id:"redux-\u4e09\u5927\u539f\u5219"},a.a.createElement(c["AnchorLink"],{to:"#redux-\u4e09\u5927\u539f\u5219","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"redux \u4e09\u5927\u539f\u5219"),a.a.createElement("ul",null,a.a.createElement("li",null,"\u5355\u4e00\u6570\u636e\u6e90"),a.a.createElement("li",null,a.a.createElement("code",null,"state")," \u53ea\u662f\u53ea\u8bfb\u7684\uff0c\u552f\u4e00\u6539\u53d8\u65b9\u6cd5\u7684\u5c31\u662f action"),a.a.createElement("li",null,a.a.createElement("code",null,"reducer")," action \u5982\u4f55\u6539\u53d8 reducer,\u53ea\u80fd\u4f7f\u7528\u7eaf\u51fd\u6570\u6267\u884c\u4fee\u6539")),a.a.createElement("h2",{id:"immutable"},a.a.createElement(c["AnchorLink"],{to:"#immutable","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"immutable"),a.a.createElement("p",null,"\u662f\u4e00\u79cd\u6301\u4e45\u5316\u6570\u636e\u3002\u4e00\u65e6\u88ab\u521b\u5efa\u5c31\u4e0d\u4f1a\u88ab\u4fee\u6539\u3002\u4fee\u6539 immutable \u5bf9\u8c61\u7684\u65f6\u5019\u8fd4\u56de\u65b0\u7684 immutable\u3002\u4f46\u662f\u539f\u6570\u636e\u4e0d\u4f1a\u6539\u53d8"),a.a.createElement("h2",{id:"useeffect-\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u5199\u5728-if-\u91cc\u9762"},a.a.createElement(c["AnchorLink"],{to:"#useeffect-\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u5199\u5728-if-\u91cc\u9762","aria-hidden":"true",tabIndex:-1},a.a.createElement("span",{className:"icon icon-link"})),"useEffect \u4e3a\u4ec0\u4e48\u4e0d\u80fd\u5199\u5728 if \u91cc\u9762\uff1f"),a.a.createElement("p",null,"\u56e0\u4e3a\u591a\u4e2a useEffect \u4f7f\u7528\u94fe\u8868\u4e32\u8054\u7684\uff0c\u5982\u679c\u4e00\u4e2a useEffect \u5199\u5728\u4e86 if \u91cc\u9762\u4f1a\u5bfc\u81f4\u5176\u4ed6\u4f4d\u7f6e\u7684 useEffect \u9519\u4e71")))}));t["default"]=e=>{var t=a.a.useContext(c["context"]),n=t.demos;return a.a.useEffect((()=>{var t;null!==e&&void 0!==e&&null!==(t=e.location)&&void 0!==t&&t.hash&&c["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),a.a.createElement(u,{demos:n})}}}]);