@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 }

引言

我發現很多前端工程師們在處理一些計算合并、事件流轉的過程中，喜歡用 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)}</>;

}