useEffect的那些坑，你知道多少
@charset "UTF-8";
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 14px; overflow-x: hidden; color: var(--cyanosis-base-color); transition: color 0.35s; --cyanosis-base-color: #353535; --cyanosis-title-color: #005bb7; --cyanosis-strong-color: #2196f3; --cyanosis-em-color: #4fc3f7; --cyanosis-del-color: #ccc; --cyanosis-link-color: #3da8f5; --cyanosis-linkh-color: #007fff; --cyanosis-border-color: #bedcff; --cyanosis-border-color-2: #ececec; --cyanosis-bg-color: #fff; --cyanosis-blockquote-color: #8c8c8c; --cyanosis-blockquote-bg-color: #f0fdff; --cyanosis-code-color: #c2185b; --cyanosis-code-bg-color: #fff4f4; --cyanosis-code-pre-color: #f8f8f8; --cyanosis-table-border-color: #c3e0fd; --cyanosis-table-th-color: #dff0ff; --cyanosis-table-tht-color: #005bb7; --cyanosis-table-tr-nc-color: #f7fbff; --cyanosis-table-trh-color: #e0edf7; --cyanosis-slct-title-color: #005bb7; --cyanosis-slct-titlebg-color: rgba(175,207,247,0.25); --cyanosis-slct-text-color: #c80000; --cyanosis-slct-bg-color: rgba(175,207,247,0.25); --cyanosis-slct-del-color: #999; --cyanosis-slct-elbg-color: #e8ebec; --cyanosis-slct-codebg-color: #ffeaeb; --cyanosis-slct-prebg-color: rgba(160,200,255,0.25) }
.markdown-body.__dark { --cyanosis-base-color: #cacaca; --cyanosis-title-color: #ddd; --cyanosis-strong-color: #fe9900; --cyanosis-em-color: #ffd28e; --cyanosis-del-color: #ccc; --cyanosis-link-color: #ffb648; --cyanosis-linkh-color: #fe9900; --cyanosis-border-color: #ffe3ba; --cyanosis-border-color-2: #ffcb7b; --cyanosis-bg-color: #2f2f2f; --cyanosis-blockquote-color: #c7c7c7; --cyanosis-blockquote-bg-color: rgba(255,199,116,0.1); --cyanosis-code-color: #000; --cyanosis-code-bg-color: #ffcb7b; --cyanosis-code-pre-color: rgba(255,227,185,0.5); --cyanosis-table-border-color: #fe9900; --cyanosis-table-th-color: #ffb648; --cyanosis-table-tht-color: #000; --cyanosis-table-tr-nc-color: #6d5736; --cyanosis-table-trh-color: #947443; --cyanosis-slct-title-color: #000; --cyanosis-slct-titlebg-color: #fe9900; --cyanosis-slct-text-color: #00c888; --cyanosis-slct-bg-color: rgba(175,207,247,0.25); --cyanosis-slct-del-color: #999; --cyanosis-slct-elbg-color: #000; --cyanosis-slct-codebg-color: #ffcb7b; --cyanosis-slct-prebg-color: rgba(160,200,255,0.25) }
.markdown-body h1 { padding-bottom: 4px; font-size: 30px }
.markdown-body h1, .markdown-body h2 { margin-top: 36px; margin-bottom: 10px; line-height: 1.5; color: var(--cyanosis-title-color); transition: color 0.35s }
.markdown-body h2 { position: relative; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 24px; border-bottom: 1px solid var(--cyanosis-border-color-2) }
.markdown-body h2:before { content: "「"; position: absolute; top: -6px; left: -14px }
.markdown-body h2:after { content: "」"; position: relative; top: 6px; right: auto }
.markdown-body h3 { position: relative; padding-bottom: 0; margin-top: 30px; margin-bottom: 10px; font-size: 20px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body h3:before { content: "»"; padding-right: 6px; color: var(--cyanosis-strong-color) }
.markdown-body h4 { margin-top: 24px; font-size: 16px }
.markdown-body h4, .markdown-body h5 { padding-bottom: 0; margin-bottom: 10px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body h5 { margin-top: 18px; font-size: 14px }
.markdown-body h6 { padding-bottom: 0; margin-top: 12px; margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body p { line-height: inherit; margin-top: 16px; margin-bottom: 16px }
.markdown-body img { max-width: 100% }
.markdown-body hr { position: relative; width: 98%; height: 1px; margin-top: 32px; margin-bottom: 32px; background-image: linear-gradient(90deg,var(--cyanosis-link-color),rgba(255,0,0,.3),hsla(0,0%,100%,.1),rgba(255,0,0,.3),var(--cyanosis-link-color)); border-width: 0; overflow: visible }
.markdown-body hr:after { content: ""; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top: 0; display: inline-block; width: 60px; height: 20px; background-color: var(--cyanosis-bg-color); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAADoklEQVRYR82XTYgcRRTHf2933Q1RjAa9eFO8JHoJ8RQVBQ2iBwXBET0YEUTXNVmNQtTpmeqaWV0XNRq/o4KoECSCEPSg4CF+BYUkIIiCoCJCPIhC/Ihh2Z0nVV27VnZnenumW9i6ddV7//frV69fVQurfMgq56NawFTPAU6QyomqXrw6wIZeyhCPebA5buNR+akKyGoAjd6BshthnYdSjqNcRVuOlIUsD2j0SuA94IwuMHdh5ZUykOUBXfSGbmKI54EtAeYIHSZoy5dl4JxvNYBOKdW1KE8BQ8AkVk6WhasWsAiN0TX9gveXQaPP+Aytpc4u+bMI06JNohsYYYYOR2lJWtS3OKDRfcAtQfgDoI6Vo4UCGb0OmAEuDvZvYmVbEd/igC3dzDz7gQu8sPA9kJDK27mBmjqBeLjTg90PDFOjWawFFQd06kZHEfaj3LAIpTRpSXsZ5E06zEYP9sDimnAApYaV2SLZG/wjMeqAkijwW4xQJ5Gf/ZzRC8OW3hiBTGGlURRswW55Bh/Ssxljrwew8l1PQaM14GngvGDzBUKdDsMeTtgU5o8B92PFlUf3YXUrHa7Fys6lBqcCGnX15YQ2A18FyPd7Crd1A3M8C1wdbH4DD3hWeP6IEXbQkG97ajR1HPFnuPP5jFFq1OWX7hl8WM9l1AO648uNfwLk7tytMeogty+xeQ4rO3r6bdcx1nuwOGsHmaXGtPzae4uzGnLH1kQkvpdZGrHjssBZJrL+pqS05KWc8tgITAPXRzYvYOXe/C2OV43eDcRBDtIhoS2f9wzc0Cv8Wls+zoFzUC5zF0U241h5uZtPfptp6OUM8wbK+cH5GEpCS17P3fJei0Z3+npTxryJ8CPzbKMtn/ZyWbkPGl0PuFPkmkjkcb4h4R2ZLwRq1H0ALmvjkf2HwK1Y+T1PY2XABe/sHJ6MxN5lnoSpnC/UGbsTaI5phK2R7x6s3Ffk5YoDOrWm3onwJHBmEP86bPmBrsGaenNoIdnxCH+gPEhLXi0Cl1VBvyPVLSh7gEuC62yAfOIUqabWEaaiucMIk6RyqJ+Q/QM69V26jjW86Gvov/EaoyT8zRCn+Xq7PVrbx0nuYUaO9wM3WAbjCE1NEUw09Um4UV+2OKfYfu5/S19gsAzGKqm6LE5FrShbdS0ku465DjDwKA/oQht19ejqbaEVuRbiLhuHByYLjtUAZpDutzP7cYdHsPJXWbjyNVgFwQoa1WXwf4Jd9YD/Ap80+yE7+u9aAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-size: auto 100%; background-position-x: 50%; transition: background-color 0.5s }
.markdown-body code { padding: 0.065em 0.4em; font-size: 0.87em; color: var(--cyanosis-code-color); overflow-x: auto; background-color: var(--cyanosis-code-bg-color); border-radius: 2px }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { display: block; padding: 16px 12px; margin: 0; font-size: 12px; color: rgba(51, 51, 51, 1); word-break: normal; overflow-x: auto; background: var(--cyanosis-code-pre-color) }
.markdown-body pre>code::-webkit-scrollbar { width: 4px; height: 4px }
.markdown-body pre>code::-webkit-scrollbar-track { background-color: var(--cyanosis-border-color) }
.markdown-body pre>code::-webkit-scrollbar-thumb { background-color: var(--cyanosis-strong-color); border-radius: 10px }
.markdown-body a { position: relative; text-decoration: none; color: var(--cyanosis-link-color); border-bottom: 1px solid var(--cyanosis-border-color) }
.markdown-body a:hover { border-bottom-color: var(--cyanosis-linkh-color) }
.markdown-body a:active, .markdown-body a:hover { color: var(--cyanosis-linkh-color) }
.markdown-body a:after { position: absolute; content: ""; top: 100%; left: 0; width: 100%; opacity: 0; border-bottom: 1px solid var(--cyanosis-border-color); transition: top 0.3s, opacity 0.3s; transform: translateZ(0) }
.markdown-body a:hover:after { top: 0; opacity: 1; border-bottom-color: var(--cyanosis-linkh-color) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid var(--cyanosis-table-border-color); border-spacing: 0; border-collapse: collapse }
.markdown-body table thead { color: rgba(0, 0, 0, 1); text-align: left; font-size: 14px; background: rgba(246, 246, 246, 1) }
.markdown-body table tr:nth-child(2n) { background-color: var(--cyanosis-table-tr-nc-color) }
.markdown-body table tr:hover { background-color: var(--cyanosis-table-trh-color) }
.markdown-body table td, .markdown-body table th { padding: 12px 8px; line-height: 24px; border: 1px solid var(--cyanosis-table-border-color) }
.markdown-body table th { color: var(--cyanosis-table-tht-color); background-color: var(--cyanosis-table-th-color) }
.markdown-body table td { min-width: 120px }
.markdown-body blockquote { color: var(--cyanosis-blockquote-color); border-left: 4px solid var(--cyanosis-strong-color); background-color: var(--cyanosis-blockquote-bg-color); padding: 1px 20px; margin: 22px 0; transition: color 0.35s }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body b, .markdown-body blockquote>b, .markdown-body blockquote>strong, .markdown-body strong { color: var(--cyanosis-strong-color) }
.markdown-body em, .markdown-body i { color: var(--cyanosis-em-color) }
.markdown-body del { color: var(--cyanosis-del-color) }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 4px }
.markdown-body ol li { padding-left: 6px }
.markdown-body details>summary { outline: none; color: var(--cyanosis-title-color); font-size: 20px; font-weight: bolder; border-bottom: 1px solid var(--cyanosis-border-color); cursor: pointer }
.markdown-body details>p { padding: 10px 20px; margin: 10px 0 0; color: rgba(102, 102, 102, 1); background-color: var(--cyanosis-blockquote-bg-color); border: 2px dashed var(--cyanosis-strong-color) }
.markdown-body h1::selection, .markdown-body h2::selection, .markdown-body h3::selection, .markdown-body h4::selection, .markdown-body h5::selection, .markdown-body h6::selection { color: var(--cyanosis-slct-title-color); background-color: var(--cyanosis-slct-titlebg-color) }
.markdown-body ol li::selection, .markdown-body p::selection, .markdown-body ul li::selection { color: var(--cyanosis-slct-text-color); background-color: var(--cyanosis-slct-bg-color) }
.markdown-body a::selection, .markdown-body b::selection, .markdown-body em::selection, .markdown-body i::selection, .markdown-body strong::selection { background-color: var(--cyanosis-slct-elbg-color) }
.markdown-body del::selection { color: var(--cyanosis-slct-del-color); background-color: var(--cyanosis-slct-elbg-color) }
.markdown-body table thead th::selection { background-color: rgba(0, 0, 0, 0) }
.markdown-body table tbody td::selection { background-color: var(--cyanosis-slct-bg-color) }
.markdown-body code::selection { background-color: var(--cyanosis-slct-codebg-color) }
.markdown-body pre>code::selection { background-color: var(--cyanosis-slct-prebg-color) }
.markdown-body .contains-task-list { padding-left: 14px; list-style: none }
.markdown-body .contains-task-list input[type="checkbox"] { position: relative }
.markdown-body .contains-task-list input[type="checkbox"]:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: inherit; height: inherit; background: rgba(240, 248, 255, 1); border: 1px solid rgba(173, 214, 255, 1); border-radius: 2px; box-sizing: border-box; z-index: 1 }
.markdown-body .contains-task-list input[type="checkbox"]:checked:after { content: "✓"; position: absolute; top: -12px; left: 0; right: 0; bottom: 0; width: 0; height: 0; color: rgba(255, 85, 85, 1); font-size: 20px; font-weight: 700; z-index: 2 }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1) }
.hljs-comment, .hljs-quote { color: rgba(92, 99, 112, 1); font-style: italic }
.hljs-doctag, .hljs-formula, .hljs-keyword { color: rgba(198, 120, 221, 1) }
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: rgba(224, 108, 117, 1) }
.hljs-literal { color: rgba(86, 182, 194, 1) }
.hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: rgba(152, 195, 121, 1) }
.hljs-built_in, .hljs-class .hljs-title { color: rgba(230, 192, 123, 1) }
.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: rgba(209, 154, 102, 1) }
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: rgba(97, 174, 238, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
.hljs-link { text-decoration: underline }
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 14px; overflow-x: hidden; color: var(--cyanosis-base-color); transition: color 0.35s; --cyanosis-base-color: #353535; --cyanosis-title-color: #005bb7; --cyanosis-strong-color: #2196f3; --cyanosis-em-color: #4fc3f7; --cyanosis-del-color: #ccc; --cyanosis-link-color: #3da8f5; --cyanosis-linkh-color: #007fff; --cyanosis-border-color: #bedcff; --cyanosis-border-color-2: #ececec; --cyanosis-bg-color: #fff; --cyanosis-blockquote-color: #8c8c8c; --cyanosis-blockquote-bg-color: #f0fdff; --cyanosis-code-color: #c2185b; --cyanosis-code-bg-color: #fff4f4; --cyanosis-code-pre-color: #f8f8f8; --cyanosis-table-border-color: #c3e0fd; --cyanosis-table-th-color: #dff0ff; --cyanosis-table-tht-color: #005bb7; --cyanosis-table-tr-nc-color: #f7fbff; --cyanosis-table-trh-color: #e0edf7; --cyanosis-slct-title-color: #005bb7; --cyanosis-slct-titlebg-color: rgba(175,207,247,0.25); --cyanosis-slct-text-color: #c80000; --cyanosis-slct-bg-color: rgba(175,207,247,0.25); --cyanosis-slct-del-color: #999; --cyanosis-slct-elbg-color: #e8ebec; --cyanosis-slct-codebg-color: #ffeaeb; --cyanosis-slct-prebg-color: rgba(160,200,255,0.25) }
.markdown-body.__dark { --cyanosis-base-color: #cacaca; --cyanosis-title-color: #ddd; --cyanosis-strong-color: #fe9900; --cyanosis-em-color: #ffd28e; --cyanosis-del-color: #ccc; --cyanosis-link-color: #ffb648; --cyanosis-linkh-color: #fe9900; --cyanosis-border-color: #ffe3ba; --cyanosis-border-color-2: #ffcb7b; --cyanosis-bg-color: #2f2f2f; --cyanosis-blockquote-color: #c7c7c7; --cyanosis-blockquote-bg-color: rgba(255,199,116,0.1); --cyanosis-code-color: #000; --cyanosis-code-bg-color: #ffcb7b; --cyanosis-code-pre-color: rgba(255,227,185,0.5); --cyanosis-table-border-color: #fe9900; --cyanosis-table-th-color: #ffb648; --cyanosis-table-tht-color: #000; --cyanosis-table-tr-nc-color: #6d5736; --cyanosis-table-trh-color: #947443; --cyanosis-slct-title-color: #000; --cyanosis-slct-titlebg-color: #fe9900; --cyanosis-slct-text-color: #00c888; --cyanosis-slct-bg-color: rgba(175,207,247,0.25); --cyanosis-slct-del-color: #999; --cyanosis-slct-elbg-color: #000; --cyanosis-slct-codebg-color: #ffcb7b; --cyanosis-slct-prebg-color: rgba(160,200,255,0.25) }
.markdown-body h1 { padding-bottom: 4px; font-size: 30px }
.markdown-body h1, .markdown-body h2 { margin-top: 36px; margin-bottom: 10px; line-height: 1.5; color: var(--cyanosis-title-color); transition: color 0.35s }
.markdown-body h2 { position: relative; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; font-size: 24px; border-bottom: 1px solid var(--cyanosis-border-color-2) }
.markdown-body h2:before { content: "「"; position: absolute; top: -6px; left: -14px }
.markdown-body h2:after { content: "」"; position: relative; top: 6px; right: auto }
.markdown-body h3 { position: relative; padding-bottom: 0; margin-top: 30px; margin-bottom: 10px; font-size: 20px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body h3:before { content: "»"; padding-right: 6px; color: var(--cyanosis-strong-color) }
.markdown-body h4 { margin-top: 24px; font-size: 16px }
.markdown-body h4, .markdown-body h5 { padding-bottom: 0; margin-bottom: 10px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body h5 { margin-top: 18px; font-size: 14px }
.markdown-body h6 { padding-bottom: 0; margin-top: 12px; margin-bottom: 10px; font-size: 12px; line-height: 1.5; color: var(--cyanosis-title-color); padding-left: 6px; transition: color 0.35s }
.markdown-body p { line-height: inherit; margin-top: 16px; margin-bottom: 16px }
.markdown-body img { max-width: 100% }
.markdown-body hr { position: relative; width: 98%; height: 1px; margin-top: 32px; margin-bottom: 32px; background-image: linear-gradient(90deg,var(--cyanosis-link-color),rgba(255,0,0,.3),hsla(0,0%,100%,.1),rgba(255,0,0,.3),var(--cyanosis-link-color)); border-width: 0; overflow: visible }
.markdown-body hr:after { content: ""; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; top: 0; display: inline-block; width: 60px; height: 20px; background-color: var(--cyanosis-bg-color); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAADoklEQVRYR82XTYgcRRTHf2933Q1RjAa9eFO8JHoJ8RQVBQ2iBwXBET0YEUTXNVmNQtTpmeqaWV0XNRq/o4KoECSCEPSg4CF+BYUkIIiCoCJCPIhC/Ihh2Z0nVV27VnZnenumW9i6ddV7//frV69fVQurfMgq56NawFTPAU6QyomqXrw6wIZeyhCPebA5buNR+akKyGoAjd6BshthnYdSjqNcRVuOlIUsD2j0SuA94IwuMHdh5ZUykOUBXfSGbmKI54EtAeYIHSZoy5dl4JxvNYBOKdW1KE8BQ8AkVk6WhasWsAiN0TX9gveXQaPP+Aytpc4u+bMI06JNohsYYYYOR2lJWtS3OKDRfcAtQfgDoI6Vo4UCGb0OmAEuDvZvYmVbEd/igC3dzDz7gQu8sPA9kJDK27mBmjqBeLjTg90PDFOjWawFFQd06kZHEfaj3LAIpTRpSXsZ5E06zEYP9sDimnAApYaV2SLZG/wjMeqAkijwW4xQJ5Gf/ZzRC8OW3hiBTGGlURRswW55Bh/Ssxljrwew8l1PQaM14GngvGDzBUKdDsMeTtgU5o8B92PFlUf3YXUrHa7Fys6lBqcCGnX15YQ2A18FyPd7Crd1A3M8C1wdbH4DD3hWeP6IEXbQkG97ajR1HPFnuPP5jFFq1OWX7hl8WM9l1AO648uNfwLk7tytMeogty+xeQ4rO3r6bdcx1nuwOGsHmaXGtPzae4uzGnLH1kQkvpdZGrHjssBZJrL+pqS05KWc8tgITAPXRzYvYOXe/C2OV43eDcRBDtIhoS2f9wzc0Cv8Wls+zoFzUC5zF0U241h5uZtPfptp6OUM8wbK+cH5GEpCS17P3fJei0Z3+npTxryJ8CPzbKMtn/ZyWbkPGl0PuFPkmkjkcb4h4R2ZLwRq1H0ALmvjkf2HwK1Y+T1PY2XABe/sHJ6MxN5lnoSpnC/UGbsTaI5phK2R7x6s3Ffk5YoDOrWm3onwJHBmEP86bPmBrsGaenNoIdnxCH+gPEhLXi0Cl1VBvyPVLSh7gEuC62yAfOIUqabWEaaiucMIk6RyqJ+Q/QM69V26jjW86Gvov/EaoyT8zRCn+Xq7PVrbx0nuYUaO9wM3WAbjCE1NEUw09Um4UV+2OKfYfu5/S19gsAzGKqm6LE5FrShbdS0ku465DjDwKA/oQht19ejqbaEVuRbiLhuHByYLjtUAZpDutzP7cYdHsPJXWbjyNVgFwQoa1WXwf4Jd9YD/Ap80+yE7+u9aAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-size: auto 100%; background-position-x: 50%; transition: background-color 0.5s }
.markdown-body code { padding: 0.065em 0.4em; font-size: 0.87em; color: var(--cyanosis-code-color); overflow-x: auto; background-color: var(--cyanosis-code-bg-color); border-radius: 2px }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { display: block; padding: 16px 12px; margin: 0; font-size: 12px; color: rgba(51, 51, 51, 1); word-break: normal; overflow-x: auto; background: var(--cyanosis-code-pre-color) }
.markdown-body pre>code::-webkit-scrollbar { width: 4px; height: 4px }
.markdown-body pre>code::-webkit-scrollbar-track { background-color: var(--cyanosis-border-color) }
.markdown-body pre>code::-webkit-scrollbar-thumb { background-color: var(--cyanosis-strong-color); border-radius: 10px }
.markdown-body a { position: relative; text-decoration: none; color: var(--cyanosis-link-color); border-bottom: 1px solid var(--cyanosis-border-color) }
.markdown-body a:hover { border-bottom-color: var(--cyanosis-linkh-color) }
.markdown-body a:active, .markdown-body a:hover { color: var(--cyanosis-linkh-color) }
.markdown-body a:after { position: absolute; content: ""; top: 100%; left: 0; width: 100%; opacity: 0; border-bottom: 1px solid var(--cyanosis-border-color); transition: top 0.3s, opacity 0.3s; transform: translateZ(0) }
.markdown-body a:hover:after { top: 0; opacity: 1; border-bottom-color: var(--cyanosis-linkh-color) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid var(--cyanosis-table-border-color); border-spacing: 0; border-collapse: collapse }
.markdown-body table thead { color: rgba(0, 0, 0, 1); text-align: left; font-size: 14px; background: rgba(246, 246, 246, 1) }
.markdown-body table tr:nth-child(2n) { background-color: var(--cyanosis-table-tr-nc-color) }
.markdown-body table tr:hover { background-color: var(--cyanosis-table-trh-color) }
.markdown-body table td, .markdown-body table th { padding: 12px 8px; line-height: 24px; border: 1px solid var(--cyanosis-table-border-color) }
.markdown-body table th { color: var(--cyanosis-table-tht-color); background-color: var(--cyanosis-table-th-color) }
.markdown-body table td { min-width: 120px }
.markdown-body blockquote { color: var(--cyanosis-blockquote-color); border-left: 4px solid var(--cyanosis-strong-color); background-color: var(--cyanosis-blockquote-bg-color); padding: 1px 20px; margin: 22px 0; transition: color 0.35s }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body b, .markdown-body blockquote>b, .markdown-body blockquote>strong, .markdown-body strong { color: var(--cyanosis-strong-color) }
.markdown-body em, .markdown-body i { color: var(--cyanosis-em-color) }
.markdown-body del { color: var(--cyanosis-del-color) }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 4px }
.markdown-body ol li { padding-left: 6px }
.markdown-body details>summary { outline: none; color: var(--cyanosis-title-color); font-size: 20px; font-weight: bolder; border-bottom: 1px solid var(--cyanosis-border-color); cursor: pointer }
.markdown-body details>p { padding: 10px 20px; margin: 10px 0 0; color: rgba(102, 102, 102, 1); background-color: var(--cyanosis-blockquote-bg-color); border: 2px dashed var(--cyanosis-strong-color) }
.markdown-body h1::selection, .markdown-body h2::selection, .markdown-body h3::selection, .markdown-body h4::selection, .markdown-body h5::selection, .markdown-body h6::selection { color: var(--cyanosis-slct-title-color); background-color: var(--cyanosis-slct-titlebg-color) }
.markdown-body ol li::selection, .markdown-body p::selection, .markdown-body ul li::selection { color: var(--cyanosis-slct-text-color); background-color: var(--cyanosis-slct-bg-color) }
.markdown-body a::selection, .markdown-body b::selection, .markdown-body em::selection, .markdown-body i::selection, .markdown-body strong::selection { background-color: var(--cyanosis-slct-elbg-color) }
.markdown-body del::selection { color: var(--cyanosis-slct-del-color); background-color: var(--cyanosis-slct-elbg-color) }
.markdown-body table thead th::selection { background-color: rgba(0, 0, 0, 0) }
.markdown-body table tbody td::selection { background-color: var(--cyanosis-slct-bg-color) }
.markdown-body code::selection { background-color: var(--cyanosis-slct-codebg-color) }
.markdown-body pre>code::selection { background-color: var(--cyanosis-slct-prebg-color) }
.markdown-body .contains-task-list { padding-left: 14px; list-style: none }
.markdown-body .contains-task-list input[type="checkbox"] { position: relative }
.markdown-body .contains-task-list input[type="checkbox"]:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: inherit; height: inherit; background: rgba(240, 248, 255, 1); border: 1px solid rgba(173, 214, 255, 1); border-radius: 2px; box-sizing: border-box; z-index: 1 }
.markdown-body .contains-task-list input[type="checkbox"]:checked:after { content: "✓"; position: absolute; top: -12px; left: 0; right: 0; bottom: 0; width: 0; height: 0; color: rgba(255, 85, 85, 1); font-size: 20px; font-weight: 700; z-index: 2 }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(171, 178, 191, 1); background: rgba(40, 44, 52, 1) }
.hljs-comment, .hljs-quote { color: rgba(92, 99, 112, 1); font-style: italic }
.hljs-doctag, .hljs-formula, .hljs-keyword { color: rgba(198, 120, 221, 1) }
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst { color: rgba(224, 108, 117, 1) }
.hljs-literal { color: rgba(86, 182, 194, 1) }
.hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string { color: rgba(152, 195, 121, 1) }
.hljs-built_in, .hljs-class .hljs-title { color: rgba(230, 192, 123, 1) }
.hljs-attr, .hljs-number, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-type, .hljs-variable { color: rgba(209, 154, 102, 1) }
.hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-symbol, .hljs-title { color: rgba(97, 174, 238, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
.hljs-link { text-decoration: underline }
引言
我发现很多前端工程师们在处理一些计算合并、事件流转的过程中，喜欢用 useEffect 来处理各类问题。
例如：
import { useRequest } from 'ahooks';
import React, { useEffect, useState } from 'react';
export function comp1({ setParams }) {
return <div onClick={() => setParams({ a: 1 })}>comp1</div>;
}
export function comp2({ defaultParams }) {
const { run } = useRequest(async () => {});
// 利用 defaultParams 的变化，运行某个事件
useEffect(() => run(), [defaultParams]);
return <div>comp2</div>;
}
export function Page() {
const [defaultParams, setDefaultParams] = useState({});
return (
<>
<comp1 setParams={setDefaultParams} />
<comp2 defaultParams={defaultParams} />
</>
);
}
import React, { useEffect, useState } from 'react';
export function Page({ defaultParams }) {
const [params, setParams] = useState(defaultParams);
useEffect(() => {
setParams({ ...defaultParams, appid: 'appid' });
}, [defaultParams]);
return <>{JSON.stringify(params)}</>;
}
上面两个例子算是比较典型的例子，都是想要说：当 xxx 变化，然后执行 xxx。
这都是典型的错误使用了 useEffect，因为对于useEffect 和 setState 的操作，对于 React 来说并不是同步执行的，React 对于 useEffect 的解释非常清楚，useEffect：
useEffect、useState这类方法都是有延时的执行，因为对于 React 来说，状态的变更可能还需要处理 VDom 的生成，Diff算法，状态合并等等。这些都需要借助异步的执行才更为高效。useEffect更是需要等待渲染结束后才会执行。
虽然这可能只是几毫秒的事情，但是如果依赖这些来做事件传递，流程处理，就意味着会出现许多中间态，因为他们不是线性同步在运行。
如果给一句话就是，请不要依赖 React 的状态变化及渲染，来干扰数据变化
最后给下上述2个例子的正确解法：
跨组件事件通信
import { useEventEmitter, useRequest } from 'ahooks';
import React from 'react';
export function comp1({ event$ }) {
return <div onClick={() => event$.emit()}>comp1</div>;
}
export function comp2({ event$ }) {
const { run } = useRequest(async () => {});
event$.useSubscription(() => run());
return <div>comp2</div>;
}
export function Page() {
// 可以采用 Context 进行跨组件层级传递
const event$ = useEventEmitter();
return (
<>
<comp1 event$={event$} />
<comp2 event$={event$} />
</>
);
}
计算属性
import { useCreation } from 'ahooks';
import React from 'react';
export function Page({ defaultParams }) {
const params = useCreation(() => ({ ...defaultParams, append: 'append' }), [defaultParams]);
return <>{JSON.stringify(params)}</>;
}
useEffect的那些坑，你知道多少的更多相关文章
- useEffect 实现 componentWillUnmount生命周期函数（四）
在写React应用的时候,在组件中经常用到componentWillUnmount生命周期函数(组件将要被卸载时执行).比如我们的定时器要清空,避免发生内存泄漏;比如登录状态要取消掉,避免下次进入信息 ...
- Hook踩坑记：React Hook react-unity-webgl
自公司前后分离上手React以来,一个坑一个坑的踩,Class的全生命周期云里雾里,还么屡明白,就抱上了Hook的大腿不松手,确实爽到飞起.修改到Hook的过程基本比较顺畅,直接少了三分之一的代码,组 ...
- 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
- 踩石行动：ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- 为C# as 类型转换及Assembly.LoadFrom埋坑！
背景: 不久前,我发布了一个调试工具:发布:.NET开发人员必备的可视化调试工具(你值的拥有) 效果是这样的: 之后,有小部分用户反映,工具用不了(没反应或有异常)~~~ 然后,建议小部分用户换个电脑 ...
- 首个threejs项目-前端填坑指南
第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...
- dll文件32位64位检测工具以及Windows文件夹SysWow64的坑
自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...
随机推荐
- vscode开发小程序2
开发tab: 1.下载阿里图标到新建文件夹icons里面 2.在app.json里面的"windows"同层下设置tab: 默认样式的设置:小程序中不识别通配符*! 1. 2.查看 ...
- Processing 使用pixels[]像素数组绘制矩形rect和圆形ellipse
余温 两次绘制了棋盘格,有了一些经验了,顺着学习态势,我们再接再厉,挖一些技巧.这一次要使用pixels[]数组绘制矩形rect和圆形ellipse,也就是代替rect()和ellipse()两个函数 ...
- k8s dial tcp 127.0.0.1:6443: connect: connection refused排查流程及解决思路
前言 k8s 集群中,使用 kubelet 报错,如下: The connection to the server 127.0.0.1:6443 was refused - did you speci ...
- go 密码 hash 加密
目录 bcrypt加密算法原理和应用 简单使用 一起实现一个demo 获取用户输入的密码 Hash & Salt 用户的密码 目前我们做了什么 验证密码 更新 Main 函数 全部代码 bcr ...
- 基础指令:mkdir、ls、cd、pwd、touch、rm、mv、cp、echo、cat、关机与重启
目录 1. 创建目录 2. 查看目录内容 3. 进入指定目录(传送) 4. 显示当前所在位置 5. 创建文件 6. 删除文件或目录 7. 移动文件 8. 复制文件或目录 9. echo输出信息到屏幕 ...
- SpringBoot+微信支付-JSAPI{微信支付回调}
引入微信支付SDK Maven: com.github.wechatpay-apiv3:wechatpay-java-core:0.2.12 Maven: com.github.wechatpay-a ...
- Oracle使用Impdp导入dmp文件的详细过程
这一天为了导入这个Oracle的dmp文件,简直就是血泪史,因本人对Oracle并不是很会,随意踩了很多小白会踩的坑,因此特意记录一下过程,防备下次的使用. 1.首先将你需要的dmp文件准备好,将其放 ...
- delphi 让子窗体显示最大化
procedure TForm2.FormCreate(Sender: TObject); begin perform(WM_SIZE,SIZE_MAXIMIZED,0); end;
- TCP协议详细介绍
TCP报文格式: 字段介绍: 源/目的端口:用来标识主机上的程序 序号(seq):4个byte,指当前tcp报文段中第一个字节的序号(tcp报文中每个字节都有一个编号) 确认号(ack):4个byte ...
- go 语言中的占位符详解
在 Go 语言的 fmt 包中,占位符用于格式化输出,允许在输出时插入变量的值.以下是一些常用的占位符及其用法: 通用占位符: %v:按照值的默认格式输出. %+v:输出结构体时,会添加字段名. %# ...