{"id":321346,"date":"2021-04-13T09:00:40","date_gmt":"2021-04-13T09:00:40","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321346"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321346","title":{"rendered":"\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 React.memo \u0438\u043b\u0438 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SimpleMemo"},"content":{"rendered":"\n
\n

\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n

\u0412 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u043c\u043e\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044f useMemo<\/code>, \u043c\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 React.memo<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0435\u0448\u0438\u043b \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u043d\u044f\u0442\u0438\u0435, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 React.memo<\/code> \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438. (\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u043e\u0439 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u0435\u043e: React.memo \u044d\u0442\u043e \u0432\u0430\u043c \u043d\u0435 useMemo<\/a> \u0438 \u0427\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f SimpleMemoComponent \u043e\u0442 MemoComponent?<\/a>)<\/p>\n

HOC \u044d\u0442\u043e \u0432\u0430\u043c \u043d\u0435 hook<\/h2>\n

\u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 useMemo<\/code> \u0438 memo<\/code>. \u042d\u0442\u043e \u0442\u043e \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f hook-\u043e\u043c<\/strong>, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 HOC-\u043e\u043c<\/strong>, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e Higher-Order Component<\/strong> \u0438\u043b\u0438 \u0436\u0435 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0412\u044b\u0441\u0448\u0435\u0433\u043e \u041f\u043e\u0440\u044f\u0434\u043a\u0430<\/strong>. <\/p>\n

hook<\/h3>\n
<\/figcaption><\/figure>\n

\u0427\u0442\u043e\u0431\u044b \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.  \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e  \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0438\u0437 \u043d\u043e\u0434. \u0418 \u0443 \u043d\u043e\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u0443\u0442\u044c \u0445\u0443\u043a\u0438. \u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438\u0445 \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442 \u0432 linked list<\/strong>, \u0438\u043b\u0438 \u0432 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 currentHooks<\/strong>.<\/p>\n

<\/figcaption><\/figure>\n

\u041f\u043e\u0442\u043e\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0438 \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0445\u0443\u043a\u043e\u0432 workInProgressHooks<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0435\u0440\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 currentHooks<\/strong>. \u0418 \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 workInProgressHooks<\/strong>, currentHooks<\/strong> \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f \u0438 workInProgressHooks<\/strong> \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 currentHooks<\/strong>. \u0418 \u0441\u043d\u043e\u0432\u0430 \u0432\u0441\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f. \u0418 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u043d\u043e\u0434\u044b.<\/p>\n

HOC<\/h3>\n

\u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0412\u044b\u0441\u0448\u0435\u0433\u043e \u041f\u043e\u0440\u044f\u0434\u043a\u0430<\/strong> \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043d\u043e\u0434\u0430, \u0442.\u0435. \u043c\u0435\u0436\u0434\u0443 \u043d\u043e\u0434\u043e\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043d\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442 prevProps<\/code> \u0441 currentProps<\/code> \u0438 \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0443\u0434\u044c\u0431\u0443 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439.<\/p>\n

<\/figcaption><\/figure>\n

\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u044d\u0442\u043e \u0434\u0432\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u0435 \u043f\u043e \u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 React<\/strong>. \u0418 \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 memo<\/strong> \u0431\u0443\u0434\u0443\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 useMemo<\/strong>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f, \u0442\u0430\u043a \u043b\u0438 \u044d\u0442\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435. <\/p>\n

\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 React.memo<\/h2>\n

\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 memo \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043a\u0435\u0442\u0435 react<\/strong> \u0432 \u0444\u0430\u0439\u043b\u0435 ReactMemo.js<\/strong><\/a>. \u0415\u0441\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 DEV \u0431\u043b\u043e\u043a\u0438, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0441\u0432\u0435\u0434\u0435\u0442\u0441\u044f \u043a \u043f\u0430\u0440\u0435 \u0441\u0442\u0440\u043e\u043a<\/p>\n

export function memo<Props>(   type: React$ElementType,   compare?: (oldProps: Props, newProps: Props) => boolean, ) {   const elementType = {     $$typeof: REACT_MEMO_TYPE,     type,     compare: compare === undefined ? null : compare,   };    return elementType; }<\/code><\/pre>\n
\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 type<\/code> — \u044d\u0442\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 memo<\/code>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043b\u0438\u0431\u043e \u043a\u043b\u0430\u0441\u0441, \u043b\u0438\u0431\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 compare<\/code> — \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 props<\/code> \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 props<\/code>, \u0430 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u0435\u0440\u043d\u0443\u0442\u044c boolean<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433 shouldComponentUpdate<\/code>. \u0412 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442. <\/p>\n
\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 elementType<\/code> — \u044d\u0442\u043e \u0432\u0441\u0435 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 HOC memo<\/strong>. \u0425\u043e\u0440\u043e\u0448\u043e, \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e memo<\/strong> \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0430 \u043a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442?<\/p>\n
\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u043e\u0434\u0430<\/h3>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
const Header = () => {   const title = <h1>test<\/h1>      console.log('title = ', title);     return title; };<\/code><\/pre>\n
\u041a\u0430\u043a \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u0447\u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438?<\/p>\n
\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0440\u0430\u0437\u043c\u044b\u0448\u043b\u044f\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u043d\u0435 \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0435\u0441\u044c \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c \u0432\u043d\u0438\u0437<\/p>\n
…<\/p>\n
..<\/p>\n
.<\/p>\n
\u0412\u043e\u0442 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n
{   $$typeof: Symbol('react.element'),   type: 'h1',   props: {     children: 'test',   }      \/\/ ... }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e $$typeof<\/code> \u0440\u0430\u0432\u0435\u043d Symbol('react.element')<\/code> — \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u043e\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f html<\/code> \u0442\u0435\u0433\u043e\u043c. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f type<\/code> \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0438\u043c\u044f \u0442\u0435\u0433\u0430, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 h1<\/code>. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c props<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0438\u0434\u0438\u043c children<\/code> c \u0442\u0435\u043a\u0441\u0442\u043e\u043c test<\/code>. \u042d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0432 h1<\/code>.<\/p>\n
\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0442\u0443, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445 React.memo<\/strong>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u043e\u0433\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c MemoComponent<\/strong> \u0438 \u0442\u0430\u043a \u0436\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c console.log<\/code> \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
const Header = () => {   return <h1>test<\/h1>; };  console.log(memo(Header));<\/code><\/pre>\n
\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n
{ \t$$typeof: Symbol('react.memo),   type: () => { return <h1>test<\/h1> },   compare: null,      \/\/ ... }<\/code><\/pre>\n
\u041a\u0430\u043a \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u0437\u0434\u0435\u0441\u044c \u0442\u0430\u043a \u0436\u0435 \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 $$typeof<\/code> \u0441 \u0434\u0432\u0443\u043c\u044f \u0437\u043d\u0430\u043a\u0430\u043c\u0438 \u0434\u043e\u043b\u043b\u0430\u0440\u0430. \u0418 \u043f\u043e\u043b\u0435 type<\/code> \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u043e\u0434\u044b \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435. \u042d\u0442\u043e \u0434\u0432\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0440\u0430\u0432\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043d\u043e\u0434\u044b. \u0422.\u043a. \u0443 \u043d\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0435 $$typeof<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u043d\u0430\u0431\u043e\u0440 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0435\u0433\u0430 h1<\/code> \u044d\u0442\u043e props<\/code>, ref<\/code>, key<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u043e\u0434\u044b \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 compare<\/code>.<\/p>\n
\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043a\u0430\u043a\u0438\u0435 \u0435\u0449\u0435 \u0442\u0438\u043f\u044b \u043d\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043f\u0430\u043a\u0435\u0442 shared<\/strong> \u0444\u0430\u0439\u043b ReactSymbols.js<\/strong><\/a>. \u0413\u0434\u0435 \u0432\u044b \u043f\u0435\u0440\u0432\u044b\u043c \u0442\u0438\u043f\u043e\u043c \u0443\u0432\u0438\u0434\u0438\u0442\u0435 react.element<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 html<\/code> \u0442\u0435\u0433. \u0422\u0430\u043a \u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0432\u0441\u0435\u043c portal<\/code>, fragment<\/code>, context<\/code>, forward_ref<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438.<\/p>\n
\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 memo \u043d\u043e\u0434\u043e\u0439 <\/h2>\n
\u042f \u0440\u0435\u0448\u0438\u043b \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438 React.memo<\/strong> \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 elementType<\/code>. \u0418 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u0439\u0442\u0438 \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u0418 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u044f \u043d\u0430\u0448\u0435\u043b \u0442\u0430\u043a\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u041e\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043a\u0435\u0442\u0435 react-reconciler<\/strong> \u0432 \u0444\u0430\u0439\u043b\u0435 ReactFiber.new.js<\/strong><\/a>. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 createFiberFromTypeAndProps<\/code>. \u0418\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c Fiber<\/code> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 type<\/code> \u0438 props<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Fiber<\/code>, \u0442\u043e\u0433\u0434\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u043e\u0434\u0430 \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n
export function createFiberFromTypeAndProps(   type: any, \/\/ React$ElementType   key: null | string,   pendingProps: any,   owner: null | Fiber,   mode: TypeOfMode,   lanes: Lanes, ): Fiber {   \/\/ ... }<\/code><\/pre>\n
\u041c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c  type<\/code>. \u042f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c console.log(type)<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 type<\/code>. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 elementType<\/code> \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0432 React.memo<\/strong>.<\/p>\n
\u0418\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e type<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043c\u044b \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 if<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u043e switch<\/code> \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c $$typeof<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0432\u0435\u043d \u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c REACT_MEMO_TYPE<\/code> (\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043e\u0434<\/a>)<\/p>\n
function createFiberFromTypeAndProps( \/* ... *\/ ) { \t\/\/ ...      if (typeof type === 'object' && type !== null) {   \tswitch (type.$$typeof) {     \t\/\/ ...                case REACT_MEMO_TYPE:         fiberTag = MemoComponent;         break;              \/\/ ...     }   }      \/\/ ...      const fiber = createFiber(fiberTag, pendingProps, key, mode);   fiber.elementType = type;   fiber.type = resolvedType;   fiber.lanes = lanes;    return fiber; }<\/code><\/pre>\n
\u0421\u0430\u043c\u0430 case<\/code> \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u043d\u0430 \u0434\u0435\u043b\u0430\u0435\u0442 — \u044d\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e fiberTag<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 MemoComponent<\/code>. \u0418 \u043d\u0438\u0436\u0435 \u0443\u0436\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e fiberTag<\/code>, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 createFiber<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f fiber<\/code> \u043d\u043e\u0434\u0430.<\/p>\n
\u0425\u043e\u0440\u043e\u0448\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e fiberTab<\/code> \u0440\u0430\u0432\u043d\u044b\u0439 MemoComponent<\/code>. \u041c\u0435\u043d\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u043e, \u0430 \u043a\u0430\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0435\u0449\u0435. \u0418 \u044f \u043f\u0435\u0440\u0435\u0448\u0435\u043b \u043f\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0443 \u0432 \u043f\u0430\u043a\u0435\u0442 react-reconciler<\/strong> \u0444\u0430\u0439\u043b ReactWorkTags<\/strong><\/a>.<\/p>\n
export const FunctionComponent = 0; export const ClassComponent = 1; export const IndeterminateComponent = 2; \/\/ Before we know whether it is function or class export const Fragment = 7; export const ContextConsumer = 9; export const ContextProvider = 10; export const ForwardRef = 11; export const SuspenseComponent = 13; export const MemoComponent = 14;       \/\/ <- MEMO COMPONENT export const SimpleMemoComponent = 15; \/\/ <- SIMPLE MEMO COMPONENT export const LazyComponent = 16; \/\/ ...<\/code><\/pre>\n
\u0427\u0442\u043e \u043c\u0435\u043d\u044f \u0442\u0443\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u043e, \u044f \u0443\u0432\u0438\u0434\u0435\u043b \u0437\u0434\u0435\u0441\u044c, \u043a\u0430\u043a MemoComponent<\/code> \u0442\u0430\u043a \u0438 SimpleMemoComponent<\/code>. \u041c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0430 \u043a\u0430\u043a \u0440\u0435\u0430\u043a\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 simple<\/code> \u044d\u0442\u043e\u0442 MemoComponent<\/code> \u0438\u043b\u0438 \u043d\u0435 simple<\/code>.<\/p>\n
\u041a\u0430\u043a\u043e\u0439 memo \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f simple?<\/h2>\n
\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c simple<\/code> \u0438\u043b\u0438 \u043d\u0435 simple<\/code>, \u044f \u0440\u0435\u0448\u0438\u043b \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c, \u0430 \u0433\u0434\u0435 \u044d\u0442\u0438 MemoComponent<\/code> \u0438 SimpleMemoComponent<\/code> \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u044f \u043d\u0430\u0448\u0435\u043b \u0442\u0430\u043a\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u043f\u0430\u043a\u0435\u0442\u0435 react-reconciler<\/strong> \u0432 \u0444\u0430\u0439\u043b\u0435 ReactFiberBeginWork<\/strong><\/a>. \u0421\u0430\u043c \u043c\u0435\u0442\u043e\u0434 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f beginWork<\/code>, \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u043d\u0430\u0448\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 React<\/strong> \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043e \u0444\u0430\u0437\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u044b React-\u0430<\/strong>. \u0410 \u043f\u043e\u043a\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a switch<\/code> \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0435\u0439 tag<\/code> \u043a\u0430\u043a \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440. \u0418 \u043d\u0438\u0436\u0435 \u043c\u044b \u043d\u0430\u0439\u0434\u0435\u043c case MemoComponent<\/code><\/p>\n
function beginWork(   current: Fiber | null,   workInProgress: Fiber,   renderLanes: Lanes, ): Fiber | null {   \/\/ ...      switch (workInProgress.tag) {     \/\/ ...      case MemoComponent: {       const type = workInProgress.type;       const unresolvedProps = workInProgress.pendingProps;       \/\/ Resolve outer props first, then resolve inner props.       let resolvedProps = resolveDefaultProps(type, unresolvedProps);       resolvedProps = resolveDefaultProps(type.type, resolvedProps);       return updateMemoComponent(         current,         workInProgress,         type,         resolvedProps,         updateLanes,         renderLanes,       );     }          \/\/ ...   }      \/\/ ... }<\/code><\/pre>\n
\u0412\u043d\u0443\u0442\u0440\u0438 case MemoComponent<\/code> \u0435\u0441\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 DEV \u0431\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442 propTypes, \u043d\u0430\u0441 \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u0435\u0433\u043e \u0432 \u043a\u043e\u0434 \u0432\u044b\u0448\u0435. \u0422\u043e\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434, \u044d\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430 resolveDefaultProps<\/code> \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u0432 updateMemoComponent<\/code>.<\/p>\n
\u0412\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 defaultProps<\/h3>\n
\u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0431\u044b\u043b, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 defaultProps<\/code>, \u044f \u043d\u0430\u043f\u043e\u043c\u043d\u044e. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u044f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u0442\u044f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0446\u0432\u0435\u0442 \u043a\u043e\u0442\u0435\u043d\u043a\u0430, \u043a\u0440\u043e\u043c\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 defaultProps<\/code>. \u0418 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0446\u0432\u0435\u0442 \u043a\u043e\u0442\u0435\u043d\u043a\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d, \u0442\u043e\u0433\u0434\u0430 \u043f\u0443\u0441\u0442\u044c \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0430\u0441\u043d\u044b\u043c. \u0418 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
const Cat = ({ color }) => {   return <p>cat color: {color}<\/p> }  Cat.defaultProps = {   color: 'red', };  const Cats = () => {   return (     <>       <Cat color=\"green\" \/>       <Cat color=\"blue\" \/>       <Cat \/>     <\/>   ) }<\/code><\/pre>\n
\u042d\u0442\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0432\u044b \u0437\u0430\u0431\u044b\u043b\u0438 \u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 JavaScript<\/strong> \u0447\u0435\u0440\u0435\u0437 \u0437\u043d\u0430\u043a \u0440\u0430\u0432\u043d\u043e \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435<\/p>\n
const Cat = ({ color = 'red' }) => {   return <p>cat color: {color}<\/p> }  const Cats = () => {   return (     <>       <Cat color=\"green\" \/>       <Cat color=\"blue\" \/>       <Cat \/>     <\/>   ) }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u044f \u0434\u0443\u043c\u0430\u044e \u0432\u0430\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442 \u043c\u0435\u0442\u043e\u0434 resolveDefaultProps<\/code>.<\/p>\n
\u0422\u0430\u043a \u0432 \u0447\u0435\u043c \u0436\u0435 \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 Memo \u0438 SimpleMemo?<\/h2>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u0435\u0449\u0435 \u043d\u0438\u0436\u0435 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u0438\u043c \u043c\u0435\u0442\u043e\u0434 beginWork<\/code>, \u0442\u043e\u0433\u0434\u0430 \u0443\u0432\u0438\u0434\u0438\u043c case<\/code> \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c SimpleMemoComponent<\/code>. \u0418 \u0437\u0434\u0435\u0441\u044c \u0443\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 updateSimpleMemoComponent<\/code>.<\/p>\n
function beginWork(   current: Fiber | null,   workInProgress: Fiber,   renderLanes: Lanes, ): Fiber | null {   \/\/ ...      switch (workInProgress.tag) {     \/\/ ...      case SimpleMemoComponent: {       return updateSimpleMemoComponent(         current,         workInProgress,         workInProgress.type,         workInProgress.pendingProps,         updateLanes,         renderLanes,       );     }          \/\/ ...   }      \/\/ ... }<\/code><\/pre>\n
\u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435 \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e updateMemoComponent<\/code>, \u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0440\u044f\u0434 \u043b\u0438 \u0443\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 updateSimpleComponent<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f resolveDefaultProps<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u043e\u0439 \u0434\u043e\u0433\u0430\u0434\u043a\u043e\u0439 \u043e\u0442\u043b\u0438\u0447\u0438\u0439 MemoComponent<\/code> \u0438 SimpleMemoComponent<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0442\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c defaultProps<\/code>, \u0437\u043d\u0430\u0447\u0438\u0442 \u044d\u0442\u043e \u043d\u0435 SimpleMemoComponent<\/code>.<\/p>\n
\u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0434\u043e\u0433\u0430\u0434\u043e\u043a \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u0435\u0442\u043e\u0434 updateMemoComponent<\/code>. \u0421\u0430\u043c \u043c\u0435\u0442\u043e\u0434 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435<\/a>.<\/p>\n
function updateMemoComponent(   current: Fiber | null,   workInProgress: Fiber,   Component: any,   nextProps: any,   updateLanes: Lanes,   renderLanes: Lanes, ): null | Fiber {   if (current === null) {     const type = Component.type;     if (       isSimpleFunctionComponent(type) &&       Component.compare === null &&       \/\/ SimpleMemoComponent codepath doesn't resolve outer props either.       Component.defaultProps === undefined     ) {       \/\/ ...     }   }      \/\/ ... }<\/code><\/pre>\n
\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e current<\/code> \u0438 null<\/code>, \u0430 current<\/code> \u0440\u0430\u0432\u0435\u043d null<\/code> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \u0422\u043e\u0433\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 if<\/code>, \u043d\u0430\u0447\u043d\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043a\u043e\u043d\u0446\u0430. \u0417\u0434\u0435\u0441\u044c \u0432\u0438\u0434\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 defaultProps<\/code> \u0440\u0430\u0432\u043d\u043e\u043c\u0443 undefined<\/code>, \u0438 \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0447\u0442\u043e simpleMemoComponent<\/code> \u043d\u0435 \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442 defaultProps<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0434\u043e\u0433\u0430\u0434\u043a\u0430 \u0431\u044b\u043b\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439. \u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 compare<\/code> \u043d\u0430 null<\/code>, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e shouldComponentUpdate<\/code> \u0432 memo<\/code>. \u0418 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0449\u0430\u044f simple<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0432 memo<\/code> \u0438\u043b\u0438 \u043d\u0435 simple<\/code>.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 isSimpleFunctionComponent<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043a\u0435\u0442\u0435 react-reconciler<\/strong> \u0432 \u0444\u0430\u0439\u043b\u0435 ReactFiber.new.js<\/strong><\/a><\/p>\n
export function isSimpleFunctionComponent(type: any) {   return (     typeof type === 'function' &&     !shouldConstruct(type) &&     type.defaultProps === undefined   ); }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0438\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 \u0442\u043e \u0447\u0442\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443 \u043d\u0430\u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u0443 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 defaultProps<\/code>, \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 shouldConstruct<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435. \u0418 \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442- \u044d\u0442\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0444\u043b\u0430\u0433\u0430 isReactComponent<\/code><\/p>\n
function shouldConstruct(Component: Function) {   const prototype = Component.prototype;   return !!(prototype && prototype.isReactComponent); }  \/\/ ...  export function resolveLazyComponentTag(Component: Function): WorkTag {   if (typeof Component === 'function') {     return shouldConstruct(Component) \/\/ <- LOOK HERE       ? ClassComponent       : FunctionComponent;    } else if (Component !== undefined && Component !== null) {     \/\/ ...   } }<\/code><\/pre>\n
C\u0443\u0434\u044f \u043f\u043e \u0432\u044b\u0437\u043e\u0432\u0443 shouldConstruct<\/code> \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0438\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434, \u0435\u0441\u043b\u0438 \u0444\u043b\u0430\u0433 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u0430, \u0432 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f Simple<\/h3>\n
\u041c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 updateMemoComponent<\/code>, \u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u0435\u0441\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u043d\u044b\u0439 if<\/code> \u0432\u0435\u0440\u043d\u0435\u0442 true<\/code>. \u0422\u043e\u0433\u0434\u0430, \u0432\u0441\u0435 \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 — \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 tag<\/code> \u0432 SimpleMemoComponent<\/code> \u0438 \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 updateSimpleMemoComponent<\/code>:<\/p>\n
function updateMemoComponent(\/* ... *\/): null | Fiber {   if (current === null) {     const type = Component.type;     if (       isSimpleFunctionComponent(type) &&       Component.compare === null &&       \/\/ SimpleMemoComponent codepath doesn't resolve outer props either.       Component.defaultProps === undefined     ) {       let resolvedType = type;       workInProgress.tag = SimpleMemoComponent; \/\/ <- update tag to SimpleMemo       workInProgress.type = resolvedType;         return updateSimpleMemoComponent(         current,         workInProgress,         resolvedType,         nextProps,         updateLanes,         renderLanes,       );     }   }      \/\/ ... }<\/code><\/pre>\n
\u0418\u043c\u0435\u043d\u043d\u043e \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f, \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Simple<\/code> \u0438\u043b\u0438 \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442<\/p>\n
\u041f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0438\u0442\u043e\u0433:<\/h3>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434\u044b \u043f\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 React<\/strong>. Memo<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043a\u043e\u0433\u0434\u0430:<\/p>\n