{"id":201823,"date":"2025-05-10T12:27:17","date_gmt":"2025-05-10T04:27:17","guid":{"rendered":"https:\/\/server.hk\/cnblog\/201823\/"},"modified":"2025-05-10T12:27:17","modified_gmt":"2025-05-10T04:27:17","slug":"react%e4%b8%adimmutable%e7%9a%84%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/server.hk\/cnblog\/201823\/","title":{"rendered":"React\u4e2dimmutable\u7684\u4f7f\u7528"},"content":{"rendered":"

<\/b> <\/p>\n

React\u4e2dimmutable\u7684\u4f7f\u7528<\/h1>\n

<\/i>\u6536\u85cf<\/span> <\/p>\n

\u4ece\u73b0\u5728\u5f00\u59cb\uff0c\u52aa\u529b\u5b66\u4e60\u5427\uff01\u672c\u6587\u300aReact\u4e2dimmutable\u7684\u4f7f\u7528\u300b<\/span>\u4e3b\u8981\u8bb2\u89e3\u4e86Reactimmutable<\/span>\u7b49\u7b49\u76f8\u5173\u77e5\u8bc6\u70b9\uff0c\u6211\u4f1a\u5728golang\u5b66\u4e60\u7f51\u4e2d\u6301\u7eed\u66f4\u65b0\u76f8\u5173\u7684\u7cfb\u5217\u6587\u7ae0\uff0c\u6b22\u8fce\u5927\u5bb6\u5173\u6ce8\u5e76\u79ef\u6781\u7559\u8a00\u5efa\u8bae\u3002\u4e0b\u9762\u5c31\u5148\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\u672c\u7bc7\u6b63\u6587\u5185\u5bb9\u5427\uff0c\u5e0c\u671b\u80fd\u5e2e\u5230\u4f60\uff01<\/p>\n

\n

react \u4e00\u76f4\u9075\u5faaUI = fn(state) \u7684\u539f\u5219\uff0c\u6709\u65f6\u5019\u6211\u4eec\u7684state\u5374\u548cUI\u4e0d\u540c\u6b65 \u6709\u65f6\u5019\u7ec4\u4ef6\u672c\u8eab\u5728\u4e1a\u52a1\u4e0a\u4e0d\u9700\u8981\u6e32\u67d3\uff0c\u5374\u53c8\u4f1a\u518d\u4e00\u6b21re-render\u3002\u4e4b\u524d\u5728\u9879\u76ee\u4e2d\u9047\u5230\u7684\u4e00\u4e9b\u95ee\u9898\uff0c\u8fd9\u91cc\u505a\u4e00\u4e2a\u7b80\u5355\u7684\u5206\u6790\uff0c\u5927\u5bb6\u53ef\u4ee5\u4e00\u8d77\u4ea4\u6d41\u4e00\u4e0b<\/p>\n<\/blockquote>\n

UI\u7ec4\u4ef6\u6e32\u67d3\u6027\u80fd<\/h2>\n

react\u6bcf\u6b21\u89e6\u53d1\u9875\u9762\u7684\u66f4\u65b0\u53ef\u5927\u81f4\u5206\u6210\u4e24\u6b65:<\/p>\n

    \n
  • render(): \u4e3b\u8981\u662f\u8ba1\u7b97v-dom\u7684diff<\/li>\n
  • commit\u9636\u6bb5 \uff1a\u5c06\u5f97\u5230\u7684diff v-dom\u4e00\u6b21\u6027\u66f4\u65b0\u5230\u771f\u5b9eDOM<\/li>\n<\/ul>\n

    \u4e00\u822c\u6211\u4eec\u8ba8\u8bba\u7684\u6e32\u67d3 \u6307\u7684\u662f\u7b2c\u4e00\u6b65, \u6211\u53ef\u4ee5\u6084\u6084\u7684\u544a\u8bc9\u4f60 \u7b2c\u4e8c\u6b65\u6211\u4eec\u4e5f\u7ba1\u4e0d\u4e86,\u4ec0\u4e48\u65f6\u5019\u66f4\u65b0\u771f\u5b9eDOM, React\u6709\u4e00\u5957\u81ea\u5df1\u7684\u673a\u5236<\/p>\n

    \u7ec4\u4ef6\u6e32\u67d3\u5206\u4e3a\u9996\u6b21\u6e32\u67d3\u548c\u91cd\u6e32\u67d3,\u9996\u6b21\u6e32\u67d3\u4e0d\u53ef\u907f\u514d\u5c31\u4e0d\u8ba8\u8bba \u91cd\u6e32\u67d3\u6307\u5f53\u7ec4\u4ef6state\u6216\u8005props\u53d1\u751f\u53d8\u5316\u7684\u65f6\u5019\u9020\u6210\u7684\u540e\u7eed\u6e32\u67d3\u8fc7\u7a0b\uff0c\u4e5f\u662f\u672c\u6587\u7684\u8ba8\u8bba\u91cd\u70b9<\/p>\n

    \u5176\u5b9eReact \u5728\u66f4\u65b0\u7ec4\u4ef6\u8fd9\u65b9\u9762 \u4e00\u76f4\u90fd\u6709\u4e00\u4e2a\u8bdf\u75c5 \u5c31\u662f\uff1a<\/p>\n

    \u7236\u7ec4\u4ef6\u91cd\u6e32\u67d3\u7684\u65f6\u5019,\u4f1a\u9012\u5f52\u91cd\u6e32\u67d3\u6240\u6709\u7684\u5b50\u7ec4\u4ef6<\/p>\n

    const List = () => {\n  const [name, setName] = useState\n   \n    (\"\");\n  \/\/ \u7528\u6765\u6d4b\u8bd5\u7684\u5176\u5b83\u72b6\u6001\u503c\n  const [count, setCount] = useState\n    \n     (0); const handleInputChange = (e: React.ChangeEvent\n     \n      ) => { const val = e.target.value; setName(val); }; const handleClick = () => { setCount((c) => c + 1); }; return ( \n      \n        \n        \n        \u6d4b\u8bd5 \n        \n        \n       ); }; const Child: React.FC\n      \n        = (props) => { console.log(\"Child has render\"); return \n       
    count:{props.count}<\/p>; }; \n      \n     \n    \n   <\/pre>\n
    <\/p>\n
    \u5f53 Input name\u6539\u53d8\u7684\u65f6\u5019 List\u89e6\u53d1rerender Child\u4f1a\u53d1\u751frerender \u53ef\u662fChild \u4f9d\u8d56\u7684props\u53ea\u6709count\u800c\u5df2, \u5982\u679c\u6240\u6709\u7684\u5b50\u7ec4\u4ef6\u90fd\u88ab\u8feb\u6e32\u67d3\uff0c\u8ba1\u7b97\u5728render\u82b1\u8d39\u7684\u65f6\u95f4\u548c\u8d44\u6e90\u6709\u53ef\u80fd\u6210\u4e3a\u6027\u80fd\u74f6\u9888.<\/p>\n
    \u65b9\u6848\u4e00\uff1ashallow compare<\/h2>\n
    React\u5176\u5b9e\u521a\u51fa\u6765\u5c31\u63d0\u4f9b\u4e86\u4f18\u5316\u7684\u624b\u6bb5\uff1a<\/p>\n
      \n
    • shouldComponentUpdate: \u8fd4\u56defalse \u5c31\u76f4\u63a5\u8df3\u8fc7\u7ec4\u4ef6\u7684render\u8fc7\u7a0b<\/li>\n
    • React.PureComponent: \u5bf9props\u8fdb\u884c\u6d45\u6bd4\u8f83\uff0c\u5982\u679c\u76f8\u7b49 \u5219\u8df3\u8fc7render \u7528\u4e8eclass \u7ec4\u4ef6<\/li>\n
    • React.memo: \u4e5f\u662f\u8fdb\u884c\u6d45\u6bd4\u8f83\uff0c\u9002\u7528\u4e8efunctional Component<\/li>\n<\/ul>\n
      \u672c\u6587\u8bbe\u8ba1\u7684\u7ec4\u4ef6\u4ee5functioal component\u4e3a\u4e3b \u56e0\u4e3a\u540e\u9762\u4f1a\u6d89\u53ca\u5230hooks\u7684\u4f7f\u7528\uff0c\u5bf9\u4e0a\u8ff0\u4f8b\u5b50\u4fee\u6539\uff1a<\/p>\n
      const Child: React.FC\n   \n     = React.memo((props) => {\n  console.log(\"Child has render\");\n  return \n    
      count:{props.count}<\/p>;\n}) \n\n   <\/pre>\n
      <\/p>\n
      \u5f88\u597d child\u6ca1\u6709\u8ddf\u7740name\u91cd\u6e32\u67d3\u4e86\uff0c\u5982\u679cprops\u662f\u4e00\u4e2a\u5bf9\u8c61\u5462\uff1f<\/p>\n
      const List = () => {\n  const [name, setName] = useState\n   \n    (\"\");\n  \/\/ \u7528\u6765\u6d4b\u8bd5\u7684\u5176\u5b83\u72b6\u6001\u503c\n  const [count, setCount] = useState\n    \n     (0); console.log(count) const handleInputChange = (e: React.ChangeEvent\n     \n      ) => { const val = e.target.value; setName(val); }; const handleClick = () => { setCount((c) => c + 1); }; const item: IItem = { text: name, id: 1, }; return ( \n      \n        \n        \n        \u6d4b\u8bd5 \n        \n        \n       ); }; const Child: React.FC = React.memo( ({ item }) => { console.log(\"Child has render\"); return \n      
      text:{item.text}<\/p>; } ); \n     \n    \n   <\/pre>\n
      \u6539\u53d8name\u65f6\u5019Child\u4f1a\u6539\u53d8 \u8fd9\u662f\u9884\u671f\u5185\u7684 \u800c\u5f53\u6539\u53d8count\u65f6\uff0cChild\u8fd8\u662f\u4f1a\u91cd\u6e32\u67d3\uff0c\u8fd9\u662f\u4ec0\u4e48\u539f\u56e0\u5462\uff1f\u56e0\u4e3acount\u6539\u53d8\u540e List\u7ec4\u4ef6\u4f1arerender \u4ece\u800c\u5bfc\u81f4\u5bfc\u81f4 item\u8fd9\u4e2a\u5bf9\u8c61\u53c8\u91cd\u65b0\u751f\u6210\u4e86 \u5bfc\u81f4child\u6bcf\u6b21\u63a5\u53d7\u7684\u662f\u4e00\u4e2a\u65b0\u7684object\u5bf9\u8c61 \u7531\u4e8e\u6bcf\u4e2aliteral object\u7684\u6bd4\u8f83\u662f\u5f15\u7528\u6bd4\u8f83 \u867d\u7136\u524d\u540e\u5c5e\u6027\u76f8\u540c\uff0c\u4f46\u6bd4\u8f83\u5f97\u51fa\u7684\u7ed3\u679c\u4e3afalse\uff0c\u9020\u6210 Child rerender \u3002<\/p>\n
      \u6d45\u6bd4\u8f83\u4e00\u5b9a\u8981\u76f8\u540c\u5f15\u7528\u5417\uff1f\u4e0d\u4e00\u5b9a\uff0c\u4e00\u822c\u7684\u9762\u8bd5\u4e2d\u6d45\u6bd4\u8f83\u53ea\u662f\u5bf9\u503c\u7684\u6bd4\u8f83 \u4f46\u662fReact.memo\u4e2d\u8981\u6c42\u5f15\u7528\u7c7b\u578b\u4e00\u5b9a\u8981\u76f8\u540c \u4e3a\u4ec0\u4e48\u5462\uff1f\u6211\u731c\u662f\u51fa\u4e8e\u5bf9\u6027\u80fd\u7684\u8003\u8651\uff0c\u4e0d\u7528\u6df1\u6bd4\u8f83\u4e5f\u662f\u4e3a\u4e86\u8282\u7ea6\u6027\u80fd \u901a\u5e38\u60c5\u51b5\u4e0b \u6211\u4eec\u60f3\u8981\u7684UI\u5bf9\u5e94\u7684\u662f\u6bcf\u4e2a\u53f6\u5b50\u8282\u70b9\u7684\u503c \uff0c\u5373\u53ea\u8981\u53f6\u5b50\u8282\u70b9\u7684\u503c\u4e0d\u53d1\u751f\u53d8\u5316 \u5c31\u4e0d\u8981rerender<\/p>\n
      \u65b9\u6848\uff1a<\/p>\n
        \n
      • \u76f4\u63a5\u5bf9\u524d\u540e\u7684\u5bf9\u8c61\u8fdb\u884cdeepCompare<\/li>\n<\/ul>\n
        \u8fd8\u597dReact.memo\u6709\u7b2c\u4e8c\u4e2a\u53c2\u6570\u53ef\u4ee5\u4f7f\u7528<\/p>\n
        const Child: React.FC = React.memo(\n  ({ item }) => {\n    console.log(\"Child has render\");\n    return 
        text:{item.text}<\/p>;\n  },\n  (preProps, nextProps) => {\n    return _.isEqual(preProps, nextProps); \/\/ lodash\u7684\u6df1\u6bd4\u8f83 \n  }\n);\n<\/pre>\n
          \n
        • \u4fdd\u8bc1\u5f15\u7528\u76f8\u7b49\u7684\u60c5\u51b5\u4e0b,\u503c\u4e5f\u76f8\u7b49 useRef<\/li>\n<\/ul>\n
            const item: MutableRefObject\n   \n     = React.useRef({\n    text: name,\n    id: 1,\n  });\n\n    \n   <\/pre>\n
          \u597d\u5bb6\u4f19\uff0cname\u65e0\u8bba\u600e\u4e48\u53d8\u5316 Child \u59cb\u7ec8\u4e0d\u4f1a\u66f4\u65b0,useRef\u4fdd\u8bc1\u4e86\u8fd4\u56de\u7684\u503c\u662f\u4e00\u4e2aMutableObject \u4e0d\u53ef\u53d8\u7684\uff0c\u610f\u601d\u5c31\u662f\u5f15\u7528\u5b8c\u5168\u76f8\u540c \u4e0d\u7ba1\u503c\u53d8\u5316 \u5c31\u4e0d\u4f1a\u4fdd\u6301\u66f4\u65b0.\u5bfc\u81f4\u4e86UI\u4e0d\u4e00\u81f4,\u90a3\u4e48\u6211\u4eec\u600e\u4e48\u4fdd\u8bc1 name \u4e0d\u53d8\u7684\u65f6\u5019 item \u548c\u4e0a\u6b21\u76f8\u7b49\uff0cname \u6539\u53d8\u7684\u65f6\u5019\u624d\u548c\u4e0a\u6b21\u4e0d\u7b49\u3002useMemo<\/p>\n
            const item: IItem = React.useMemo(\n    () => ({\n      text: name,\n      id: 1,\n    }),\n    [name] \/\/ name\u53d8\u5316\u89e6\u53d1item\u4e0d\u7b49 name\u4e0d\u53d8item\u548c\u4e0a\u6b21\u76f8\u540c\n  );\n<\/pre>\n
          \u603b\u7ed3\uff1a<\/h2>\n
            \n
          • \u7236\u7ec4\u4ef6\u91cd\u6e32\u67d3\u7684\u65f6\u5019,\u4f1a\u9012\u5f52\u91cd\u6e32\u67d3\u6240\u6709\u7684\u5b50\u7ec4\u4ef6<\/strong><\/li>\n
          • \u5bf9primitive \u503c\u7684\u6570\u636e React\u6bd4\u8f83\u503c\u7684\u76f8\u7b49\u6765\u5224\u65ad\u662f\u5426\u91cd\u6e32\u67d3\u7ec4\u4ef6 \u5bf9Object\u6570\u636e React\u6bd4\u8f83\u5f15\u7528 \u5982\u679c\u5f15\u7528\u76f8\u540c \u4e0d\u4f1a\u91cd\u6e32\u67d3,\u5982\u679c\u5f15\u7528\u4e0d\u540c \u4f1a\u8ba4\u4e3a\u662f\u4e0d\u540c\u5bf9\u8c61 \u9020\u6210\u91cd\u6e32\u67d3<\/li>\n
          • useRef\u8fd4\u56de\u4e00\u4e2aMutableRefObject\u6570\u636e \u6c38\u8fdc\u8fd4\u56de\u7684\u662f\u540c\u4e00\u4e2a\u5f15\u7528 \u76f4\u5230\u751f\u547d\u5468\u671f\u7ed3\u675f,\u5b98\u7f51\u7684\u6ce8\u89e3<\/li>\n<\/ul>\n
              \n
            • useRef<\/code> returns a mutable ref object whose .current<\/code> property is initialized to the passed argument<\/li>\n<\/ul>\n
                \n
              • \n
                  \n
                • (initialValue<\/code>). The returned object will persist for the full lifetime of the component.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                    \n
                  • useMemo \u8fd4\u56de\u4e00\u4e2a\u8ba1\u7b97\u7684\u503c \u5f53dep\u6539\u53d8\u65f6 \u8fd4\u56de\u7684\u503c\u624d\u6539\u53d8\uff08\u5f15\u7528\u7684\u6539\u53d8\uff09<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                    React\u4e2dimmutable\u7684...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101],"tags":[],"class_list":["post-201823","post","type-post","status-publish","format-standard","hentry","category-database"],"_links":{"self":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/201823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/comments?post=201823"}],"version-history":[{"count":0,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/posts\/201823\/revisions"}],"wp:attachment":[{"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/media?parent=201823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/categories?post=201823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/server.hk\/cnblog\/wp-json\/wp\/v2\/tags?post=201823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}