{"id":351,"date":"2026-04-12T20:09:00","date_gmt":"2026-04-12T12:09:00","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=351"},"modified":"2026-06-12T21:35:56","modified_gmt":"2026-06-12T13:35:56","slug":"%e4%bb%80%e4%b9%88%e6%97%b6%e5%80%99%e7%94%a8useeffect","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/04\/12\/%e4%bb%80%e4%b9%88%e6%97%b6%e5%80%99%e7%94%a8useeffect\/","title":{"rendered":"\u4ec0\u4e48\u65f6\u5019\u7528useEffect"},"content":{"rendered":"\n
import React, { useState } from 'react';\nimport AccountLogin from '.\/component\/AccountLogin.jsx'\nimport SmCodeLogin from '.\/component\/SmCodeLogin.jsx'\nimport { Form, Input, Button, Row, Col } from 'antd';\nimport IconMap from 'components\/IconMap.jsx';\nimport logoImg from 'common\/img\/logo.png';\nimport '.\/css\/login.less';\n\nconst FormItem = Form.Item;\nconst Login = () => {\n    const [form] = Form.useForm();\n    const [type, setType] = useState('account');\n    console.log(form,'form');\n    const submitUserInfo = (values) => {\n        console.log(values);\n    }\n    \n    const ComponentSelector = props => type==='account' ? <AccountLogin {...props} \/> : <SmCodeLogin {...props} \/>;\n\n    return (\n        <div className=\"form-wrapper\">\n            <div className=\"logo\">\n                <img src={logoImg} alt=\"logo\" \/>\n                <span>\u4eba\u4e8b\u7ba1\u7406\u7cfb\u7edf<\/span>\n            <\/div>\n            <Form form={form} onFinish={submitUserInfo}>\n                {ComponentSelector({form, FormItem, Input})}\n                <Row>\n                    <Button block={true} type=\"primary\" htmlType=\"submit\">\u767b\u5f55<\/Button>\n                <\/Row>\n                <Row className=\"txt-tip\">\n                    <Col span={6}>\u5fd8\u8bb0\u5bc6\u7801<\/Col>\n                    <Col span={18} className=\"txt-right\" onClick={() => setType(type!=='account' ? 'account' : 'smcode')}>\n                    {\n                        type!=='account' ? '\u4f7f\u7528\u8d26\u6237\u540d\u5bc6\u7801\u8fdb\u884c\u767b\u5f55' : '\u4f7f\u7528\u624b\u673a\u53f7\u8fdb\u884c\u767b\u5f55'\n                    }\n                    {IconMap.arrRowRight}\n                    <\/Col>\n                <\/Row>\n            <\/Form>\n        <\/div>\n    );\n};\nexport default Login;<\/code><\/pre>\n\n\n\n
1\u3001\u4e3a\u4ec0\u4e48\u4e0d\u7528 useEffect\uff1f<\/h2>\n\n\n\n
\u4f60\u8fd9\u6bb5\u662fJSX \u6761\u4ef6\u6e32\u67d3<\/strong>\uff0c\u5904\u5728\u7ec4\u4ef6\u6e32\u67d3\u6267\u884c\u6d41\u7a0b\u91cc\uff1a<\/p>\n\n\n\n
    \n
  1. \u7ec4\u4ef6\u4efb\u610f state \/props \u66f4\u65b0 \u2192 \u51fd\u6570\u7ec4\u4ef6\u91cd\u65b0\u6267\u884c\uff1b<\/li>\n\n\n\n
  2. type<\/code> \u662f useState<\/code> \u53d8\u91cf\uff0c\u8c03\u7528 setType<\/code> \u4fee\u6539\u540e\uff0c\u7ec4\u4ef6\u91cd\u6e32\u67d3\uff1b<\/li>\n\n\n\n
  3. \u4e09\u5143\u8868\u8fbe\u5f0f\u91cd\u65b0\u5224\u65ad type === 'account'<\/code>\uff1b<\/li>\n\n\n\n
  4. \u8981\u4e48\u8fd4\u56de <AccountLogin><\/code>\uff0c\u8981\u4e48\u8fd4\u56de <SmCodeLogin><\/code>\uff0cDOM \u81ea\u52a8\u66ff\u6362\u3002<\/li>\n<\/ol>\n\n\n\n
    \u793a\u4f8b\u5b8c\u6574\u4ee3\u7801\uff1a<\/p>\n\n\n\n
    jsx<\/p>\n\n\n\n
    const [type, setType] = useState('account');\n\nconst ComponentSelector = props => {\n  return type === 'account'\n    ? <AccountLogin {...props} \/>\n    : <SmCodeLogin {...props} \/>;\n};\n\n\/\/ \u4f7f\u7528\n<ComponentSelector \/>\n<\/code><\/pre>\n\n\n\n
    setType('code')<\/code> \u6267\u884c\u540e\u7acb\u523b\u6362\u7ec4\u4ef6\uff0c\u5b8c\u5168\u4e0d\u9700\u8981\u624b\u52a8\u76d1\u542c type<\/code>\u3002<\/p>\n\n\n\n
    2\u3001\u4e24\u4e2a\u7ec6\u8282\u5173\u952e\u70b9<\/h2>\n\n\n\n
    \uff081\uff09\u7ec4\u4ef6\u4f1a\u5378\u8f7d\u91cd\u5efa\uff0c\u5185\u90e8\u72b6\u6001\u4f1a\u6e05\u7a7a<\/h3>\n\n\n\n
    AccountLogin<\/code> \u548c SmCodeLogin<\/code> \u662f\u4e24\u4e2a\u5b8c\u5168\u4e0d\u540c\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n