var Component=(()=>{var m=Object.create;var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),b=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},t=(a,n,s,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of h(n))!u.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(o=d(n,c))||o.enumerable});return a};var y=(a,n,s)=>(s=a!=null?m(N(a)):{},t(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),g=a=>t(l({},"__esModule",{value:!0}),a);var i=k((x,r)=>{r.exports=_jsx_runtime});var A={};b(A,{default:()=>f,frontmatter:()=>P});var e=y(i()),P={title:"\u5982\u4F55\u5305\u88C5\u7B2C\u4E09\u65B9 React \u7EC4\u4EF6",date:"2023-07-21T19:08:55.319Z",categories:["Front-End"],tags:["React"],icon:"react"};function p(a){let n=Object.assign({p:"p",code:"code",ol:"ol",li:"li",h2:"h2",a:"a",pre:"pre",span:"span"},a.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["\u5728\u672C\u6587\u4E2D\uFF0C\u6211\u4EEC\u5C06\u8BA8\u8BBA\u5982\u4F55\u4F18\u96C5\u5730\u5305\u88C5\u7B2C\u4E09\u65B9 React \u7EC4\u4EF6\uFF0C\u5E76\u4ECB\u7ECD\u4E00\u4E2A\u5177\u4F53\u5B9E\u4F8B\uFF1A\u5982\u4F55\u5305\u88C5 ",(0,e.jsx)(n.code,{children:"react-photo-album"})," \u4E2D\u5BFC\u51FA\u7684 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u3002"]}),` `,(0,e.jsx)(n.p,{children:"\u6211\u4EEC\u6709\u4E24\u4E2A\u9700\u6C42"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:["\u7ED9 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u7684\u67D0\u4E9B\u5C5E\u6027\u8BBE\u7F6E\u9884\u8BBE\u503C\uFF0C\u4F46\u4E0D\u5F71\u54CD\u5176\u4ED6\u5C5E\u6027\u3002"]}),` `,(0,e.jsxs)(n.li,{children:["\u4E3A ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u6DFB\u52A0 ",(0,e.jsx)(n.code,{children:"React.memo()"})," \u5C42\u3002"]}),` `]}),` `,(0,e.jsx)(n.h2,{id:"\u9700\u6C42\u4E00\u8BBE\u7F6E\u9884\u8BBE\u503C",children:(0,e.jsx)(n.a,{href:"#\u9700\u6C42\u4E00\u8BBE\u7F6E\u9884\u8BBE\u503C",children:"\u9700\u6C42\u4E00\uFF1A\u8BBE\u7F6E\u9884\u8BBE\u503C"})}),` `,(0,e.jsxs)(n.p,{children:["\u9996\u5148\uFF0C\u6211\u4EEC\u60F3\u7ED9 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u7684 ",(0,e.jsx)(n.code,{children:"layout"}),"\u3001",(0,e.jsx)(n.code,{children:"columns"})," \u548C ",(0,e.jsx)(n.code,{children:"spacing"})," \u5C5E\u6027\u589E\u52A0\u9884\u8BBE\u503C\uFF0C\u4F46\u53C8\u4E0D\u5E0C\u671B\u5F71\u54CD\u5176\u4ED6\u7684 ",(0,e.jsx)(n.code,{children:"props"})," \u5C5E\u6027\u3002"]}),` `,(0,e.jsx)(n.p,{children:"\u6700\u521D\u7684\u5C1D\u8BD5\u5982\u4E0B\uFF1A"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," memo ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbum"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"150"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"7",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line",line:"8",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" layout ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'masonry'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"columns"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"floor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" spacing ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"16"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),`restProps `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` props `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"PhotoAlbum"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"layout",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"columns"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"columns",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"spacing"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"spacing",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"restProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u7136\u800C\uFF0C\u8FD9\u6837\u7684\u4EE3\u7801\u5728\u4F7F\u7528\u65F6\u4F1A\u62A5\u9519\uFF0C\u63D0\u793A ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u7F3A\u5931\u3002\u8FD9\u662F\u56E0\u4E3A ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u5728 ",(0,e.jsx)(n.code,{children:"PhotoAlbumProps"})," \u4E2D\u662F ",(0,e.jsx)(n.code,{children:"required"})," \u7684\u3002\u5C3D\u7BA1\u6211\u4EEC\u4E3A\u5176\u589E\u52A0\u4E86\u9884\u8BBE\u503C\uFF0C\u4F46\u7531\u4E8E\u4F7F\u7528\u4E86\u539F\u6709\u7684\u7C7B\u578B\u58F0\u660E\uFF0C\u6240\u4EE5\u5728\u4F7F\u7528\u65F6\u4ECD\u7136\u8981\u6C42 ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u3002"]}),` `,(0,e.jsxs)(n.p,{children:["\u4E3A\u4E86\u89E3\u51B3\u8FD9\u4E2A\u95EE\u9898\uFF0C\u6211\u4EEC\u9700\u8981\u5C06 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u7684 ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u53D8\u4E3A\u53EF\u9009\u7684\uFF0C\u540C\u65F6\u4E0D\u5F71\u54CD\u5176\u4ED6\u5C5E\u6027\u7684\u7C7B\u578B\u3002"]}),` `,(0,e.jsx)(n.p,{children:"\u8FD9\u91CC\u6211\u4EEC\u53EF\u4EE5\u4F7F\u7528\u7C7B\u578B\u7F16\u7A0B\u7684\u65B9\u6CD5\u6765\u5B9E\u73B0\u8FD9\u4E2A\u76EE\u6807\u3002"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-diff-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," memo ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbum"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"150"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"7",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line inserted",line:"8",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:["PartialSubset",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"keyof"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Partial"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Pick"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"}),(0,e.jsx)(n.span,{className:"token operator",children:">>"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Omit"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line deleted",line:"10",children:[(0,e.jsx)(n.span,{className:"token operator",children:"-"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line inserted",line:"11",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PartialSubset"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"'layout'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" layout ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'masonry'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"columns"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"floor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" spacing ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"16"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),`restProps `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` props `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"PhotoAlbum"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"layout",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"columns"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"columns",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"spacing"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"spacing",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"restProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u5728\u4E0A\u8FF0\u4EE3\u7801\u4E2D\uFF0C\u6211\u4EEC\u5B9A\u4E49\u4E86\u4E00\u4E2A\u6CDB\u578B\u51FD\u6570\u7C7B\u578B ",(0,e.jsx)(n.code,{children:"PartialSubset"}),"\uFF0C\u5B83\u63A5\u53D7\u4E00\u4E2A\u7C7B\u578B ",(0,e.jsx)(n.code,{children:"T"})," \u548C\u4E00\u4E2A\u5C5E\u6027\u952E\u96C6\u5408 ",(0,e.jsx)(n.code,{children:"K"})," \u4F5C\u4E3A\u53C2\u6570\uFF0C\u5E76\u8FD4\u56DE\u4E00\u4E2A\u65B0\u7684\u7C7B\u578B\u3002\u8FD9\u4E2A\u65B0\u7C7B\u578B\u662F\u5C06\u7C7B\u578B ",(0,e.jsx)(n.code,{children:"T"})," \u4E2D\u6307\u5B9A\u5C5E\u6027 ",(0,e.jsx)(n.code,{children:"K"})," \u53D8\u4E3A\u53EF\u9009\u7684\uFF0C\u5E76\u4FDD\u7559\u5176\u4ED6\u5C5E\u6027\u7684\u7C7B\u578B\u6784\u6210\u7684\u3002\u901A\u8FC7\u4F7F\u7528\u8FD9\u4E2A\u7C7B\u578B\uFF0C\u6211\u4EEC\u5C06 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u7684 ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u53D8\u4E3A\u53EF\u9009\u7684\uFF0C\u800C\u5176\u4ED6\u5C5E\u6027\u4E0D\u53D7\u4EFB\u4F55\u5F71\u54CD\u3002"]}),` `,(0,e.jsxs)(n.p,{children:["\u73B0\u5728\u4F7F\u7528 ",(0,e.jsx)(n.code,{children:""})," \u65F6\uFF0C\u4E0D\u4F1A\u518D\u63D0\u793A ",(0,e.jsx)(n.code,{children:"layout"})," \u5C5E\u6027\u7F3A\u5931\u7684\u95EE\u9898\u3002"]}),` `,(0,e.jsx)(n.h2,{id:"\u9700\u6C42\u4E8C\u6DFB\u52A0-reactmemo",children:(0,e.jsx)(n.a,{href:"#\u9700\u6C42\u4E8C\u6DFB\u52A0-reactmemo",children:"\u9700\u6C42\u4E8C\uFF1A\u6DFB\u52A0 React.memo()"})}),` `,(0,e.jsxs)(n.p,{children:["\u7B2C\u4E8C\u4E2A\u9700\u6C42\u662F\u7ED9 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u6DFB\u52A0 ",(0,e.jsx)(n.code,{children:"React.memo()"})," \u5C42\uFF0C\u4EE5\u63D0\u9AD8\u6027\u80FD\u3002"]}),` `,(0,e.jsxs)(n.p,{children:["\u5728\u89E3\u51B3\u8FD9\u4E2A\u9700\u6C42\u65F6\uFF0C\u6211\u4EEC\u9762\u4E34\u4E86\u4E00\u4E2A\u6BD4\u8F83\u68D8\u624B\u7684\u95EE\u9898\u3002",(0,e.jsx)(n.code,{children:"React.memo()"})," \u4F1A\u5F71\u54CD\u7EC4\u4EF6\u7684\u6CDB\u578B\uFF0C\u5982\u679C\u76F4\u63A5\u4F7F\u7528 ",(0,e.jsx)(n.code,{children:"React.memo()"})," \u8FDB\u884C\u5305\u88F9\uFF0C\u53EF\u80FD\u4F1A\u5BFC\u81F4\u7EC4\u4EF6\u5728\u4F7F\u7528\u65F6\u51FA\u73B0\u6CDB\u578B\u76F8\u5173\u7684\u95EE\u9898\u3002"]}),` `,(0,e.jsxs)(n.p,{children:["\u901A\u8FC7\u53C2\u8003 ",(0,e.jsx)(n.a,{href:"https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623",children:"issuecomment-65659662"}),"\uFF0C\u6211\u4EEC\u627E\u5230\u4E86\u4E00\u4E2A\u5408\u9002\u7684\u65B9\u5F0F\u6765\u5904\u7406 ",(0,e.jsx)(n.code,{children:"React.memo()"})," \u5BF9\u6CDB\u578B\u7684\u5F71\u54CD\uFF0C\u5373\u4F7F\u7528\u7C7B\u578B\u65AD\u8A00\u6765\u5904\u7406\uFF0C\u5177\u4F53\u505A\u6CD5\u5982\u4E0B\uFF1A"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsx)(n.code,{className:"language-tsx code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MemoizedComponent"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"InnerComponent"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"InnerComponent"}),` `]})})}),` `,(0,e.jsx)(n.p,{children:"\u7EFC\u4E0A\u6240\u8FF0\uFF0C\u6700\u7EC8\u7684\u4EE3\u7801\u5982\u4E0B\uFF1A"}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-diff-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," memo ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbum"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react-photo-album'"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"150"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"7",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsxs)(n.span,{className:"token class-name",children:["PartialSubset",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"keyof"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Partial"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Pick"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"}),(0,e.jsx)(n.span,{className:"token operator",children:">>"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Omit"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"K"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Photo"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PartialSubset"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"PhotoAlbumProps"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token constant",children:"T"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"'layout'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" layout ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'masonry'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"columns"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"floor"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"containerWidth ",(0,e.jsx)(n.span,{className:"token operator",children:"/"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"IDEAL_COLUMN_WIDTH"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" spacing ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token number",children:"16"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),`restProps `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` props `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"PhotoAlbum"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"layout"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"layout",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"columns"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"columns",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"spacing"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"spacing",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"restProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"19",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number highlight-line inserted",line:"20",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token function",children:"memo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"typeof"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CustomPhotoAlbum"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["\u5728\u4E0A\u8FF0\u4EE3\u7801\u4E2D\uFF0C\u6211\u4EEC\u6210\u529F\u5730\u7ED9 ",(0,e.jsx)(n.code,{children:""})," \u7EC4\u4EF6\u6DFB\u52A0\u4E86 ",(0,e.jsx)(n.code,{children:"React.memo()"})," \u5C42\uFF0C\u5E76\u4F7F\u7528\u7C7B\u578B\u65AD\u8A00\u6765\u5904\u7406\u6CDB\u578B\u95EE\u9898\uFF0C\u4FDD\u8BC1\u4E86\u7EC4\u4EF6\u5728\u4F7F\u7528\u65F6\u4E0D\u4F1A\u51FA\u73B0\u6CDB\u578B\u76F8\u5173\u7684\u9519\u8BEF\u3002"]})]})}function w(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var f=w;return g(A);})(); ;return Component;

Tag:React

React如何包装第三方 React 组件

Jest使用 Jest Mock React 组件中使用的变量

Ant DesignAntd 弹窗嵌套表单 Demo

Ant DesignAntd 4.4.0 Tooltip Bug

如何包装第三方 React 组件

使用 Jest Mock React 组件中使用的变量

Antd 弹窗嵌套表单 Demo

Antd 4.4.0 Tooltip Bug