{"id":24906,"date":"2022-06-13T17:00:33","date_gmt":"2022-06-13T13:34:49","guid":{"rendered":"https:\/\/parspack.com\/blog\/?p=24906"},"modified":"2025-01-10T14:43:09","modified_gmt":"2025-01-10T11:13:09","slug":"introduction-react-hooks","status":"publish","type":"post","link":"https:\/\/parspack.com\/blog\/cms\/introduction-react-hooks","title":{"rendered":"\u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0686\u06cc\u0633\u062a\u061f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0622\u0645\u0648\u0632\u0634 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc Hook \u062f\u0631 React"},"content":{"rendered":"

\u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc React\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0647\u0633\u062a\u0646\u062f\u061b \u0648\u0644\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0628\u0647\u200c\u0647\u0645\u06cc\u0646\u200c\u062f\u0644\u06cc\u0644\u060c \u06af\u0627\u0647\u06cc \u0628\u0647\u200c\u0646\u0627\u0686\u0627\u0631 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u0645\u0627\u0646 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645. \u0628\u0627\u0627\u06cc\u0646\u200c\u062d\u0627\u0644\u060c \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u0631\u0648\u0634\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0639\u0636\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u06cc \u0648 \u06a9\u0644\u0627\u0633\u06cc \u0631\u0627 \u062a\u0648\u0623\u0645\u0627\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u0648 \u0622\u0646 \u0686\u06cc\u0632\u06cc \u0646\u06cc\u0633\u062a \u062c\u0632 \u0647\u0648\u06a9 (Hook). \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628 \u0627\u0632 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u062a\u0648\u0627<\/a> \u0628\u0644\u0627\u06af \u067e\u0627\u0631\u0633 \u067e\u06a9\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627 \u0647\u0648\u06a9 \u062f\u0631\u200c \u0631\u06cc\u200c\u0627\u06a9\u062a \u0622\u0634\u0646\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f\u061b \u067e\u0633 \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646 \u0628\u0627 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n

\u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0686\u06cc\u0633\u062a\u061f<\/span><\/h2>\n

\u0647\u0648\u06a9\u200c\u0647\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0627\u0632 \u0646\u0633\u062e\u0647 16.8.0 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0631\u06cc\u200c\u0627\u06a9\u062a \u0645\u062b\u0644 State \u0648 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a (Lifecycle) \u0631\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u200c\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u0645\u0645\u06a9\u0646 \u0648 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n

\n

\u0646\u06a9\u062a\u0647:<\/strong> \u0627\u0632 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062f\u0631 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f!<\/p>\n<\/blockquote>\n

\"\u0647\u0648\u06a9
hook \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0686\u06cc\u0633\u062a \u0648 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u061f<\/figcaption><\/figure>\n

\u0686\u06af\u0648\u0646\u0647 \u0647\u0648\u06a9 \u0631\u0627 \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc React \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645\u061f<\/span><\/h2>\n

\u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u0647\u0648\u06a9 \u0628\u0647 \u06a9\u062f\u0647\u0627\u06cc React\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f\u0647\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0646\u0633\u062e\u0647 React \u0631\u0627 \u062d\u062a\u0645\u0627\u064b \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f:<\/p>\n

# Via npm\r\n$ npm install --save react@next react-dom@next\r\n\r\n# Or via Yarn\r\n$ yarn add react@next react-dom@next<\/pre>\n
\u0642\u0648\u0627\u0646\u06cc\u0646 \u06a9\u0644\u06cc \u0646\u0648\u0634\u062a\u0646 \u0647\u0648\u06a9\u200c\u0647\u0627<\/span><\/h2>\n
\u0628\u0647\u200c\u0637\u0648\u0631\u06a9\u0644\u06cc\u060c \u062f\u0631 \u0646\u0648\u0634\u062a\u0646 \u06a9\u062f\u0647\u0627\u06cc \u0647\u0648\u06a9 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0686\u0646\u062f \u0646\u06a9\u062a\u0647 \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f:<\/p>\n
    \n
  • \u0647\u0648\u06a9\u200c\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u06a9\u0644\u0645\u0647 \u00abUse\u00bb \u0634\u0631\u0648\u0639 \u0634\u0648\u0646\u062f.<\/li>\n
  • \u0647\u0648\u06a9\u200c\u0647\u0627 \u0631\u0627 \u0641\u0642\u0637 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648\u0627\u0628\u0639 \u0648 \u0627\u0632 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0632\u06cc\u062a\u06cc \u0645\u0647\u0645 \u062f\u0627\u0646\u0633\u062a\u061b \u0686\u0648\u0646 \u0628\u0627\u0639\u062b \u0627\u06cc\u062c\u0627\u062f \u0645\u0646\u0637\u0642 \u06af\u0631\u0648\u0647\u06cc \u0628\u06cc\u0646 \u0647\u0645\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/li>\n
  • \u0627\u0632 \u0647\u0648\u06a9 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0633\u0637\u062d \u0628\u0627\u0644\u0627\u06cc \u06a9\u062f\u0647\u0627\u06cc\u062a\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0646\u0647 \u062f\u0627\u062e\u0644 \u062f\u0633\u062a\u0648\u0631\u0647\u0627\u06cc \u0634\u0631\u0637\u06cc \u0648 \u062d\u0644\u0642\u0647\u200c\u0627\u06cc \u06cc\u0627 \u062a\u0648\u0627\u0628\u0639 \u062a\u0648\u062f\u0631\u062a\u0648 \u06a9\u0647 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648\u0627\u0628\u0639 \u062f\u0627\u0631\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f \u06a9\u0647 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0628\u0627 \u0647\u0645\u0627\u0646 \u062a\u0631\u062a\u06cc\u0628 \u0648 \u0628\u0631\u200c\u0627\u0633\u0627\u0633 \u0647\u0631 \u0631\u0646\u062f\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/li>\n<\/ul>\n
    \"\u0622\u0645\u0648\u0632\u0634
    \u0642\u0648\u0627\u0646\u06cc\u0646 \u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0634\u0627\u0645\u0644 \u0686\u0647 \u0645\u0648\u0627\u0631\u062f\u06cc \u0627\u0633\u062a\u061f<\/figcaption><\/figure>\n
    \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc State \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0627 \u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a
    \n<\/span><\/h2>\n
    \u0627\u06af\u0631 \u0628\u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0647\u200c\u06a9\u0645\u06a9 hook \u062f\u0631 react \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639\u06cc \u0627\u0632 \u0646\u0648\u0639 Stateful \u0628\u0633\u0627\u0632\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u00abuseState\u00bb \u0627\u0632 React package \u060cState \u0645\u062f\u0646\u0638\u0631 \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0631\u0648\u0634 \u06cc\u06a9 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 State \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u062f\u0648 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f: \u06cc\u06a9\u06cc \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u062d\u0627\u0648\u06cc State \u0641\u0639\u0644\u06cc \u0648 \u062f\u06cc\u06af\u0631\u06cc \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 State.<\/p>\n
    \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631\u060c \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062a\u0627\u0628\u0639 \u0627\u0632 \u0646\u0648\u0639 Stateful \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u0647\u0631\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9\u060c \u0631\u0646\u06af\u06cc \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u062a\u0635\u0627\u062f\u0641\u06cc \u0633\u0650\u062a \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n
    import React, { useState } from \"react\";\r\nimport { render } from \"react-dom\";\r\n\r\nfunction StatefulFn() {\r\n  const [color, setColor] = useState(false);\r\n\r\n  function onClick() {\r\n    const colors = [\r\n      \"#008F68\",\r\n      \"#6DB65B\",\r\n      \"#4AAE9B\",\r\n      \"#FAE042\",\r\n      \"#EFBB35\",\r\n      \"#DFA612\"\r\n    ];\r\n\r\n    setColor(colors[Math.floor(Math.random() * colors.length)]);\r\n  }\r\n\r\n  return (\r\n    <button onClick={onClick} style={{ backgroundColor: color }}>\r\n      Click to Change Button Color\r\n    <\/button>\r\n  );\r\n}\r\n\r\nconst container = document.createElement(\"div\");\r\ndocument.body.appendChild(container);\r\nrender(<StatefulFn \/>, container);\r\n<\/pre>\n
    \u0634\u06cc\u0648\u0647 useState \u0637\u0648\u0631\u06cc \u0637\u0631\u0627\u062d\u06cc \u200c\u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646\u062f \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0648\u0627\u062d\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f\u060c \u0646\u0647 \u0628\u0627 \u0634\u06cc\u200c\u0621 State (\u06cc\u0639\u0646\u06cc \u0628\u0631\u062e\u0644\u0627\u0641 \u0633\u0627\u0632\u0648\u06a9\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Class). \u0628\u0647\u200c\u0647\u0645\u06cc\u0646\u200c\u062f\u0644\u06cc\u0644\u060c \u06cc\u0627 \u0628\u0627\u06cc\u062f \u062e\u0648\u062f\u0645\u0627\u0646 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0634\u06cc\u200c\u0621 State \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u0645 \u06cc\u0627 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 useState \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0647\u0631\u06cc\u06a9 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0631\u0627 \u062f\u0631 State\u200c\u200c \u062e\u0648\u062f \u0631\u062f\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n
    const [color, setColor] = useState(false);\r\nconst [size, setSize] = useState('medium');\r\nconst [reptile, setReptile] = useState('alligator');<\/pre>\n
    \u0641\u0639\u0627\u0644\u200c\u06a9\u0631\u062f\u0646 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0627 \u0647\u0648\u06a9 \u062f\u0631 React<\/span><\/h2>\n
    \u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0645\u0634\u06a9\u0644\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0627\u0628\u0639\u060c \u0646\u0628\u0648\u062f \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a (Lifecycle) \u0628\u0631\u0627\u06cc \u0622\u0646\u200c\u0647\u0627\u0633\u062a. \u0627\u06cc\u0646 \u062f\u0631 \u062d\u0627\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0647\u0648\u06a9 \u0627\u0636\u0627\u0641\u0647\u200c\u0634\u062f\u0646 \u00abuseEffect\u00bb \u0627\u0633\u062a. useEffect \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0633\u062a \u0627\u0632 componentDidUpdate \u0648 componentDidMount \u0648 componentWillUnmount. \u0628\u0647\u200c\u0639\u0628\u0627\u0631\u062a\u200c\u062f\u06cc\u06af\u0631\u060c useEffect \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0647\u0631 \u0631\u0646\u062f\u0631 \u062f\u06cc\u06af\u0631\u06cc \u06a9\u0647 \u0628\u0639\u062f\u0627\u064b \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f\u060c \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \u0627\u06af\u0631 \u0628\u0627 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc React \u0622\u0634\u0646\u0627 \u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u06cc\u200c\u062f\u0627\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u062a\u0635\u0645\u06cc\u0645 \u062f\u0631\u0633\u062a\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u062f\u0647\u0627\u06cc \u062f\u0627\u0631\u0627\u06cc \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u0631\u0627 \u062f\u0631 \u0634\u06cc\u0648\u0647 \u0631\u0646\u062f\u0631 \u0628\u06af\u0646\u062c\u0627\u0646\u06cc\u0645. \u062f\u0631\u0648\u0627\u0642\u0639\u060c \u0641\u0644\u0633\u0641\u0647 \u0648\u062c\u0648\u062f \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0647\u0645\u06cc\u0646 \u0645\u0633\u0626\u0644\u0647 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a.<\/p>\n
    \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc\u060c \u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u0628\u06a9\u0647 \u0648 \u0628\u0639\u062f \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc State \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631\u060c \u0628\u0627 \u00absetTimeout\u00bb \u0627\u062a\u0635\u0627\u0644 \u0634\u0628\u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631 \u06a9\u064f\u0646\u062f \u0631\u0627 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062f\u0631\u0636\u0645\u0646\u060c \u067e\u06cc\u0627\u0645\u06cc \u0631\u0627 \u0647\u0645 \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627\u06cc\u062f \u0645\u0646\u062a\u0638\u0631 \u0628\u0627\u0634\u062f\u060c \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645:<\/p>\n
    import React, { useEffect, useState } from \"react\";\r\nimport { render } from \"react-dom\";\r\n\r\nfunction EffectedFn() {\r\n  const [loading, setLoading] = useState(true);\r\n\r\n  useEffect(() => {\r\n    setTimeout(() => {\r\n      setLoading(false);\r\n    }, 1000 * 10);\r\n  });\r\n\r\n  return (\r\n    <div>\r\n      {loading && <span>Loading...<\/span>}\r\n      {!loading && <span>All Done!<\/span>}\r\n    <\/div>\r\n  );\r\n}\r\n\r\nconst container = document.createElement(\"div\");\r\ndocument.body.appendChild(container);\r\nrender(<EffectedFn \/>, container);<\/pre>\n
    \u0646\u06a9\u062a\u0647 \u062c\u0630\u0627\u0628 \u062f\u0631\u0628\u0627\u0631\u0647 useEffect \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u062e\u0644\u0627\u0641 componentDidMount \u0648 componentDidUpdate\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0631\u0627 \u0628\u0644\u0627\u06a9 \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0637\u0645\u0626\u0646 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u0647\u0627\u06cc\u062a\u0627\u0646 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0648 \u0633\u0631\u06cc\u0639 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \u0634\u0627\u06cc\u0627\u0646 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0639\u0645\u0644\u06a9\u0631\u062f \u0647\u0648\u06a9 \u062f\u0631 React\u060c \u0628\u0647\u200c\u062e\u0635\u0648\u0635 \u0645\u0648\u0642\u0639 \u06a9\u0627\u0631 \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0686\u0646\u062f\u062d\u0627\u0644\u062a\u0647 (Multiple State)\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 useEffect \u0628\u06af\u0648\u06cc\u06cc\u062f \u06a9\u0647 \u0641\u0642\u0637 \u0648\u0642\u062a\u06cc \u0641\u0639\u0627\u0644 \u0634\u0648\u062f \u06a9\u0647 \u0645\u0642\u062f\u0627\u0631 \u062e\u0627\u0635\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n
    useEffect(() => {\r\n  setTimeout(() => {\r\n    setLoading(false);\r\n  }, 1000 * 10);\r\n}, [loading]);<\/pre>\n
    \u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/span><\/h2>\n
    \u0627\u06af\u0631 \u0627\u0632 \u0631\u062f\u0648\u0628\u062f\u0644\u200c\u06a9\u0631\u062f\u0646 \u062a\u0648\u0627\u0628\u0639 \u0628\u06cc\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u060c \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u0647\u0646\u06af\u0627\u0645 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 State \u0648 Lifecycle \u062e\u0633\u062a\u0647 \u0634\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u0627\u0632 \u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0645\u06a9 \u0628\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u062a\u0627\u0646 \u0631\u0627 \u0628\u0647\u200c\u0645\u0631\u0627\u062a\u0628 \u0631\u0627\u062d\u062a\u200c\u062a\u0631 \u06a9\u0646\u06cc\u062f. \u0628\u062e\u0634 \u062c\u0630\u0627\u0628 \u0645\u0627\u062c\u0631\u0627 \u0627\u06cc\u0646\u200c\u062c\u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062e\u0648\u062f\u062a\u0627\u0646 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631\u0628\u0647\u200c\u0641\u0631\u062f\u06cc \u0631\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u06cc\u062f \u0648 \u0646\u06cc\u0632 \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0648\u0633\u06cc\u0639 \u0647\u0648\u06a9\u200c\u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 React \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f.<\/p>\n
    \u0633\u0624\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/span><\/h2>\n
    \u06f1. \u06a9\u062f\u0627\u0645 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc React \u0634\u0627\u0645\u0644 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0647\u0633\u062a\u0646\u062f\u061f<\/span><\/h3>\n
    \u0647\u0648\u06a9\u200c\u0647\u0627 \u0627\u0632 \u0646\u0633\u062e\u0647 16.8.0 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646\u062f \u0648 \u062f\u0631\u200c\u062d\u0627\u0644\u200c\u062d\u0627\u0636\u0631\u060c \u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0627\u06cc\u062f\u0627\u0631\u06cc \u062f\u0627\u0631\u0646\u062f:<\/p>\n
      \n
    • React DOM<\/li>\n
    • React Native<\/li>\n
    • React DOM Server<\/li>\n
    • React Test Renderer<\/li>\n
    • React Shallow Renderer<\/li>\n<\/ul>\n
      \u06f2. \u0622\u06cc\u0627 \u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u062a\u0631 React\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0648\u06a9 \u0636\u0631\u0648\u0631\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f\u061f<\/span><\/h3>\n
      \u062e\u06cc\u0631\u060c \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645 \u062f\u0631\u0628\u0627\u0631\u0647 \u0647\u0648\u06a9 \u062f\u0631 React \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0627 \u0648\u0642\u062a\u06cc \u062e\u0648\u062f\u062a\u0627\u0646 \u0646\u062e\u0648\u0627\u0647\u06cc\u062f\u060c \u0647\u06cc\u0686 \u0627\u0644\u0632\u0627\u0645\u06cc \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u062a\u0627 \u0648\u0642\u062a\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f\u060c \u0628\u0627 \u0647\u0645\u0627\u0646 \u0631\u0648\u0634 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0627\u0631 \u0631\u0627 \u067e\u06cc\u0634 \u0628\u0628\u0631\u06cc\u062f.<\/p>\n
      \u06f3. \u0622\u06cc\u0627 \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u0647\u0648\u06a9 \u0628\u0647 \u06a9\u062f\u0647\u0627\u060c \u0628\u0627\u06cc\u062f \u0647\u0645\u0647 \u062a\u0648\u0627\u0628\u0639 \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645\u061f<\/span><\/h3>\n
      \u062e\u06cc\u0631\u060c \u0647\u0648\u06a9\u200c\u0647\u0627 \u0628\u0627 \u062a\u0645\u0627\u0645 \u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0633\u0627\u0632\u06af\u0627\u0631\u200c\u0646\u062f\u061b \u0628\u0647\u200c\u0647\u0645\u06cc\u0646\u200c\u062f\u0644\u06cc\u0644\u060c \u0648\u0642\u062a\u06cc \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u06a9\u062f\u0647\u0627\u06cc\u062a\u0627\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n
      \u06f4. \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647\u200c\u06a9\u0631\u062f\u0646 \u0647\u0648\u06a9\u200c\u0647\u0627\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0627 \u0647\u0645 \u0628\u0647 \u0647\u0648\u06a9 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u0645\u061f<\/span><\/h3>\n
      \u062e\u06cc\u0631\u060c \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0627\u0631\u06cc \u0628\u0647 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u061b \u0645\u06af\u0631 \u0648\u0642\u062a\u06cc\u200c \u06a9\u0647 \u0628\u0647\u200c\u062f\u0644\u0627\u06cc\u0644 \u062f\u06cc\u06af\u0631 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0631\u0627 \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u06a9\u0646\u06cc\u062f (\u0645\u062b\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u062f\u06cc\u0628\u0627\u06af\u200c\u06a9\u0631\u062f\u0646). \u062f\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0631\u0627 \u0647\u0645 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0647\u0648\u06a9 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f.<\/p>\n
      \u06f5. \u0622\u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0647\u0648\u06a9\u200c\u0647\u0627 \u0631\u0627 \u062f\u0627\u062e\u0644 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645\u061f<\/span><\/h3>\n
      \u062e\u06cc\u0631\u060c \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0647\u0648\u06a9 \u0631\u0627 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f\u061b \u0627\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u062a\u0648\u0627\u0628\u0639 \u0631\u0627 \u0628\u0627 \u0647\u0648\u06a9\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u062f\u0631\u062e\u062a \u0648\u0627\u062d\u062f \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n