{"id":63673,"date":"2024-05-25T22:37:56","date_gmt":"2024-05-25T19:07:56","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg\/"},"modified":"2024-05-25T22:37:56","modified_gmt":"2024-05-25T19:07:56","slug":"exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg\/","title":{"rendered":"\u0628\u0631\u0631\u0633\u06cc React Hooks: \u0645\u0632\u0627\u06cc\u0627\u060c \u0645\u0639\u0627\u06cc\u0628\u060c \u0648 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc"},"content":{"rendered":"<div data-article-id=\"1865090\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u06af\u06cc \u0633\u0644\u0627\u0645 \u0648 \u0631\u062d\u0645\u062a \u0648 \u0628\u0631\u06a9\u0627\u062a \u062e\u062f\u0627\u0648\u0646\u062f \u0628\u0631 \u0634\u0645\u0627 \u0628\u0627\u062f<br \/>\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 React\u060c Hooks \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 DOM \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.  Hooks \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0646\u062d\u0648 \u0638\u0631\u06cc\u0641 \u062a\u0631 \u0648 \u0645\u062e\u062a\u0635\u0631\u062a\u0631\u060c \u0645\u0632\u0627\u06cc\u0627\u06cc \u0628\u06cc \u0634\u0645\u0627\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0645\u0639\u0627\u06cc\u0628 \u062e\u0648\u062f \u0631\u0627 \u0646\u06cc\u0632 \u062f\u0627\u0631\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0632\u0627\u06cc\u0627\u060c \u0645\u0639\u0627\u06cc\u0628 \u0648 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u0647\u0631 React Hook \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg\/#%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%DB%8C%D8%A7%D9%84%D8%AA%DB%8C\" >\u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0627\u0644\u062a\u06cc:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg\/#%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%D8%AB%D8%B1\" >\u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0627\u062b\u0631:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/exploring-react-hooks-benefits-drawbacks-and-real-world-examples-5fpg\/#%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA_%D8%AA%DA%A9%D9%85%DB%8C%D9%84%DB%8C\" >\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u06a9\u0645\u06cc\u0644\u06cc:<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%DB%8C%D8%A7%D9%84%D8%AA%DB%8C\"><\/span>\n<p>  \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0627\u06cc\u0627\u0644\u062a\u06cc:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0627\u0644\u062a<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a \u0631\u0627 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0631\u0627 \u0627\u0632 \u0628\u06cc\u0646 \u0645\u06cc \u0628\u0631\u062f.<\/li>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062d\u0627\u0644\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0631\u0646\u062f\u0631 \u0645\u062c\u062f\u062f \u0627\u062c\u0632\u0627 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0641\u0631\u062f\u06cc.<\/li>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0646\u062c\u0631 \u0628\u0647 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a \u0639\u0645\u06cc\u0642 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0634\u0648\u062f\u060c \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0646\u0647\u0627 \u0633\u062e\u062a \u062a\u0631 \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u06a9 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0633\u0627\u062f\u0647.<\/p>\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">Counter<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">count<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setCount<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Count<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">count<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setCount<\/span><span class=\"p\">(<\/span><span class=\"nx\">count<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Increment<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0646\u0637\u0642 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062d\u0627\u0644\u062a.<\/li>\n<li>\u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 useState \u0631\u0648\u06cc\u06a9\u0631\u062f \u0633\u0627\u062e\u062a\u0627\u0631\u0645\u0646\u062f\u062a\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u0639\u0645\u0644\u06a9\u0631\u062f \u0642\u0637\u0639\u0627\u062a \u0631\u0627 \u0628\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u062a\u0648\u062f\u0631\u062a\u0648 \u0628\u0647\u06cc\u0646\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u06a9 \u0645\u0641\u0627\u0647\u06cc\u0645\u06cc \u0645\u0627\u0646\u0646\u062f \u06a9\u0627\u0647\u0634 \u062f\u0647\u0646\u062f\u0647 \u0647\u0627 \u0648 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646\u06cc \u06a9\u0647 \u062a\u0627\u0632\u0647 \u0628\u0627 React \u06cc\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0622\u0634\u0646\u0627 \u0647\u0633\u062a\u0646\u062f \u0646\u0627\u0622\u0634\u0646\u0627 \u0628\u0627\u0634\u062f.<\/li>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u062f \u062f\u06cc\u06af \u0628\u062e\u0627\u0631 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0641\u0632\u0648\u062f\u0646\u060c \u062d\u0630\u0641 \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a.\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useReducer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">todoReducer<\/span><span class=\"p\">(<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n   <span class=\"k\">switch <\/span><span class=\"p\">(<\/span><span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n     <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ADD_TODO<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n       <span class=\"k\">return<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">payload<\/span><span class=\"p\">];<\/span>\n     <span class=\"k\">case<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">TOGGLE_TODO<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span>\n       <span class=\"k\">return<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">todo<\/span> <span class=\"o\">=&gt;<\/span>\n         <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">action<\/span><span class=\"p\">.<\/span><span class=\"nx\">payload<\/span> <span class=\"p\">?<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">todo<\/span><span class=\"p\">,<\/span> <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span> <span class=\"p\">}<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">todo<\/span>\n       <span class=\"p\">);<\/span>\n     <span class=\"nl\">default<\/span><span class=\"p\">:<\/span>\n       <span class=\"k\">return<\/span> <span class=\"nx\">state<\/span><span class=\"p\">;<\/span>\n   <span class=\"p\">}<\/span>\n <span class=\"p\">}<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">TodoList<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">todos<\/span><span class=\"p\">,<\/span> <span class=\"nx\">dispatch<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useReducer<\/span><span class=\"p\">(<\/span><span class=\"nx\">todoReducer<\/span><span class=\"p\">,<\/span> <span class=\"p\">[]);<\/span>\n\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"p\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">todo<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n           <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span> <span class=\"nx\">type<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">checkbox<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">checked<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">dispatch<\/span><span class=\"p\">({<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">TOGGLE_TODO<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">payload<\/span><span class=\"p\">:<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">})}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>           <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"p\">))}<\/span>\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">dispatch<\/span><span class=\"p\">({<\/span> <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ADD_TODO<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">payload<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">(),<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">New Todo<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}<\/span> <span class=\"p\">})}<\/span><span class=\"o\">&gt;<\/span>\n         <span class=\"nx\">Add<\/span> <span class=\"nx\">Todo<\/span>\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\n<\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7%DB%8C_%D8%A7%D8%AB%D8%B1\"><\/span>\n<p>  \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0627\u062b\u0631:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<p><strong>useEffect<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u060c \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc DOM \u06cc\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0627\u0632 \u0645\u0646\u0637\u0642 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u06cc\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062e\u0648\u0627\u0646\u0627\u06cc\u06cc \u06a9\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0627\u06af\u0631 \u0628\u0627 \u0627\u062d\u062a\u06cc\u0627\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0634\u0648\u062f\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0645\u0646\u062c\u0631 \u0628\u0647 \u0631\u0641\u062a\u0627\u0631 \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647 \u0634\u0648\u062f\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u062f\u0631 \u0645\u0648\u0631\u062f \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0648 \u0645\u0646\u0637\u0642 \u067e\u0627\u06a9\u0633\u0627\u0632\u06cc.<\/li>\n<li>\u067e\u06cc\u0627\u0645\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u062b\u0631\u0627\u062a \u0628\u0627\u0644\u0642\u0648\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0647\u0631 \u0631\u0646\u062f\u0631.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0632 \u06cc\u06a9 API.\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">DataFetching<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setData<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n\n   <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/api.example.com\/data<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n       <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">())<\/span>\n       <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setData<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">))<\/span>\n       <span class=\"p\">.<\/span><span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Error fetching data:<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">));<\/span>\n   <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"p\">{<\/span><span class=\"nx\">data<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span><span class=\"o\">&gt;<\/span>\n           <span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n             <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\n<\/span>           <span class=\"p\">))}<\/span>\n         <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Loading<\/span><span class=\"p\">...<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"p\">)}<\/span>\n     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>useLayoutEffect<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u067e\u0633 \u0627\u0632 \u062a\u0645\u0627\u0645 \u062c\u0647\u0634\u200c\u0647\u0627\u06cc DOM \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u06a9\u0646\u062a\u0631\u0644 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0627\u0641\u06a9\u062a\u200c\u0647\u0627\u06cc \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc\u200c\u0647\u0627\u06cc DOM \u06cc\u0627 \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u06af\u200c\u0622\u0645\u06cc\u0632\u06cc \u0645\u062c\u062f\u062f \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0647\u0645\u0632\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f\u060c \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0628\u0627\u0644\u0642\u0648\u0647 \u0631\u0646\u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0645\u0633\u062f\u0648\u062f \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0627\u062f\u0631\u0633\u062a \u06cc\u0627 \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0645\u0646\u062c\u0631 \u0628\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u0634\u0648\u062f.<\/li>\n<li>\u0645\u0634\u0627\u0628\u0647 useEffect\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u0628\u06cc\u0646 \u0622\u0646\u200c\u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u06a9 \u06a9\u0627\u0631\u0628\u0631\u062f \u062e\u0627\u0635 \u0648 \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u062f\u0627\u0632\u0647 \u06af\u06cc\u0631\u06cc \u0647\u0627\u06cc DOM.\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useLayoutEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">LayoutEffectExample<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">width<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setWidth<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">);<\/span>\n\n   <span class=\"nf\">useLayoutEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"kd\">const<\/span> <span class=\"nx\">handleResize<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n       <span class=\"nf\">setWidth<\/span><span class=\"p\">(<\/span><span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span><span class=\"p\">);<\/span>\n     <span class=\"p\">};<\/span>\n\n     <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleResize<\/span><span class=\"p\">);<\/span>\n     <span class=\"nf\">handleResize<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ Initial measurement<\/span>\n\n     <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">resize<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">handleResize<\/span><span class=\"p\">);<\/span>\n   <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n   <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Window<\/span> <span class=\"nx\">Width<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span><span class=\"nx\">width<\/span><span class=\"p\">}<\/span><span class=\"nx\">px<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p&gt;<\/span><span class=\"err\">;\n<\/span> <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>useInsertionEffect<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 React \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u062f\u0631 DOM \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f\u060c \u062c\u0644\u0648\u0647 \u0647\u0627 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u0641\u0632\u0648\u062f\u0646 CSS \u067e\u0648\u06cc\u0627 \u06cc\u0627 \u0633\u0627\u06cc\u0631 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u067e\u06cc\u0634 \u0631\u0646\u062f\u0631 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0631\u0627\u06cc \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f DOM \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc React \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u0641\u06cc\u062f \u0627\u0633\u062a.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 useEffect \u0648 useLayoutEffect \u06a9\u0645\u062a\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u06a9\u0645\u062a\u0631 \u0628\u0627 \u0631\u0641\u062a\u0627\u0631 \u0648 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627\u06cc \u0622\u0646 \u0622\u0634\u0646\u0627 \u0628\u0627\u0634\u0646\u062f.<\/li>\n<li>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0631\u06a9 \u0631\u0648\u0634\u0646\u06cc \u0627\u0632 \u0632\u0645\u0627\u0646 \u0648 \u0686\u0631\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u06cc\u0627 \u0645\u0634\u06a9\u0644\u0627\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0627\u0631\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 CSS.\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useInsertionEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">InsertionEffectExample<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nf\">useInsertionEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"kd\">const<\/span> <span class=\"nx\">style<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">style<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n     <span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">textContent<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n       .dynamic-element {\n         color: red;\n         font-weight: bold;\n       }\n     `<\/span><span class=\"p\">;<\/span>\n     <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">head<\/span><span class=\"p\">.<\/span><span class=\"nf\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">style<\/span><span class=\"p\">);<\/span>\n\n     <span class=\"k\">return <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n       <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">head<\/span><span class=\"p\">.<\/span><span class=\"nf\">removeChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">style<\/span><span class=\"p\">);<\/span>\n     <span class=\"p\">};<\/span>\n   <span class=\"p\">},<\/span> <span class=\"p\">[]);<\/span>\n\n   <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">dynamic-element<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Dynamic<\/span> <span class=\"nx\">Element<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div&gt;<\/span><span class=\"err\">;\n<\/span> <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA_%D8%AA%DA%A9%D9%85%DB%8C%D9%84%DB%8C\"><\/span>\n<p>  \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u06a9\u0645\u06cc\u0644\u06cc:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<p><strong>useContext<\/strong>:<\/p>\n<ul>\n<li>\n<strong>\u0641\u0648\u0627\u06cc\u062f<\/strong>:<\/p>\n<ul>\n<li>\u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627\u0621 \u0628\u062f\u0648\u0646 \u062d\u0641\u0627\u0631\u06cc \u067e\u0627\u06cc\u0647 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0631\u0627\u0647\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0628\u0631\u0627\u06cc \u0645\u0635\u0631\u0641 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0632\u0645\u06cc\u0646\u0647 \u062f\u0631 \u0647\u0631 \u0633\u0637\u062d \u062a\u0648\u062f\u0631\u062a\u0648 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\u062c\u0641\u062a \u0634\u062f\u0646 \u0627\u062c\u0632\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0642\u0627\u0628\u0644\u06cc\u062a \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u06a9\u062f \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0627\u0634\u06a9\u0627\u0644\u0627\u062a\u06cc<\/strong>:<\/p>\n<ul>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0646\u0627\u0645\u0634\u062e\u0635 \u0645\u0624\u0644\u0641\u0647 \u0645\u0646\u062c\u0631 \u0634\u0648\u062f \u0648 \u0631\u062f\u06cc\u0627\u0628\u06cc \u062c\u0631\u06cc\u0627\u0646 \u062f\u0627\u062f\u0647 \u0631\u0627 \u062f\u0634\u0648\u0627\u0631\u062a\u0631 \u06a9\u0646\u062f.<\/li>\n<li>\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u06cc\u0627 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0622\u0646\u0647\u0627 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0631\u0646\u062f\u0631\u0647\u0627\u06cc \u0645\u062c\u062f\u062f \u0627\u062d\u062a\u0645\u0627\u0644\u06cc \u0646\u0627\u0634\u06cc \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0632\u0645\u06cc\u0646\u0647\u060c \u062d\u06cc\u0627\u062a\u06cc \u0627\u0633\u062a\u060c \u0645\u0646\u0627\u0633\u0628 \u0646\u0628\u0627\u0634\u062f.<\/li>\n<\/ul>\n<\/li>\n<li>\n<strong>\u0645\u062b\u0627\u0644 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/strong>: \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0632\u0645\u06cc\u0646\u0647.\n<\/li>\n<\/ul>\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">ThemeContext<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createContext<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">light<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">ThemedButton<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ThemeContext<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">background<\/span><span class=\"p\">:<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dark<\/span><span class=\"dl\">'<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">black<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">white<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">dark<\/span><span class=\"dl\">'<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">white<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">black<\/span><span class=\"dl\">'<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Themed<\/span> <span class=\"nx\">Button<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button&gt;<\/span><span class=\"err\">;\n<\/span><span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>\u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647\u060c React Hooks \u0645\u0632\u0627\u06cc\u0627\u06cc \u0645\u062a\u0639\u062f\u062f\u06cc \u0627\u0632 \u0646\u0638\u0631 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u062f\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0631\u06a9 \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u0638\u0631\u06cc\u0641 \u0622\u0646\u0647\u0627\u060c \u0627\u0646\u062a\u062e\u0627\u0628 \u0642\u0644\u0627\u0628 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0633\u0646\u0627\u0631\u06cc\u0648\u060c \u0648 \u0628\u0647 \u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u062c\u062a\u0646\u0627\u0628 \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u0631\u0627\u06cc\u062c \u0648 \u0628\u0647 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0631\u0633\u0627\u0646\u062f\u0646 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0622\u0646\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u06af\u06cc \u0633\u0644\u0627\u0645 \u0648 \u0631\u062d\u0645\u062a \u0648 \u0628\u0631\u06a9\u0627\u062a \u062e\u062f\u0627\u0648\u0646\u062f \u0628\u0631 \u0634\u0645\u0627 \u0628\u0627\u062f\u062f\u0631 \u062a\u0648\u0633\u0639\u0647 React\u060c Hooks \u0646\u062d\u0648\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0648 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 DOM \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u06cc \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a. Hooks \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0646\u062d\u0648 \u0638\u0631\u06cc\u0641 \u062a\u0631 \u0648 \u0645\u062e\u062a\u0635\u0631\u062a\u0631\u060c \u0645\u0632\u0627\u06cc\u0627\u06cc \u0628\u06cc \u0634\u0645\u0627\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0645\u0639\u0627\u06cc\u0628 \u062e\u0648\u062f \u0631\u0627 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63674,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-63673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=63673"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63673\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63674"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}