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的区别 ...
随机推荐
- 解决 Docker 安装时“无法获取 dpkg 前端锁”错误的有效方法
在安装 Docker 的过程中,不少用户可能会遇到"无法获取 dpkg 前端锁"的错误提示.这是一个较为常见但也令人困扰的问题.下面为您详细介绍几种可能的解决方法: 方法一:检查并 ...
- Hive - 数据流转与DDL设计
数据流转设计 表的分类 按所有权分类可分为:外部表(外表)和托管表(内部表.内表). 按表的存储格式分类可分为:Text表.Orc表.Torc表.Holodesk表.Hyperbase表.ES表 按表 ...
- 单元测试三部曲-AAA模式
AAA 指的是 "Arrange, Act, Assert",这是一种通用的单元测试模式. 在测试方法中, 1.首先对测试对象进行准备(Arrange), 2.然后调用要测试的方法 ...
- Python基础笔记-while、字符串格式化、运算符、基础概念与数据类型
前言 !!!注意:本系列所写的文章全部是学习笔记,来自于观看视频的笔记记录,防止丢失.观看的视频笔记来自于:哔哩哔哩武沛齐老师的视频:2022 Python的web开发(完整版) 入门全套教程,零基础 ...
- apache和nginx關聯php的過程
Nginx端 Nginx是一個服務器,同時也是一個功能強大的proxy服務器,除了進行http請求的代理,還可以進行其他協議請求代理(fastCgi協議),為了能使nginx理解fastCgi協議,n ...
- PaddleOCR学习笔记2-初步识别服务
今天初步实现了网页,上传图片,识别显示结果到页面的服务.后续再完善. 采用flask + paddleocr+ bootstrap快速搭建OCR识别服务. 代码结构如下: 模板页面代码文件如下: up ...
- Linux指令详解之：进程与系统负载
目录 5.4 进程(process) 5.4.1 守护进程 5.4.2 僵尸进程 5.4.3 孤儿进程 6.0 进程监控指令 6.0.1 ps(报告当前系统的进程状态) 6.0.2 ps aux 结果 ...
- .net 跨域 config中配置
<system.webServer> <validation validateIntegratedModeConfiguration="false" /> ...
- English interview - how to show your skills in English during the interview process?(probably used in resume,cover letter)
Formula We can use the formula below to express our skills in English. Formula: adv/adj + verb phras ...
- 【SpringCloud】Hystrix熔断器
Hystrix熔断器 概述 分布式系统面临的问题 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数10个依赖关系,每个依赖关系在某些时候将不可避免地失败 服务雪崩 多个微服务之间调用的时候,假 ...