import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["В большинстве случаев достаточно составить производные ", jsx(_components.code, {
        children: "Сигналы"
      }), ". Однако иногда полезно кэшировать значения чтобы сократить объем работы. Мы можем использовать ", jsx(_components.code, {
        children: "Мемо"
      }), " (", jsx(_components.code, {
        children: "Memo"
      }), ") для вычисления функции и сохранения результата до тех пор, пока не изменятся её зависимости. Это отлично подходит для кэширования вычислений эффектов, которые имеют другие зависимости, и упрощения некоторых дорогостоящих операций, таких как создание узла DOM."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "Мемо"
      }), " являются одновременно наблюдателем, как Эффект, и Сигналом только-для-чтения. Поскольку они \"знают\" как о своих зависимостях, так и о своих наблюдателях, они могут \"убедиться\", что они запускаются только один раз для любого изменения. Это делает их предпочтительнее регистрации Эффектов, изменяющих ", jsx(_components.code, {
        children: "Сигналы"
      }), ". В общем случае, лучше обходиться производными Сигналами везде, где это возможно."]
    }), "\n", jsxs(_components.p, {
      children: ["Чтобы создать ", jsx(_components.code, {
        children: "Мемо"
      }), ", нужно просто передать функцию в ", jsx(_components.code, {
        children: "createMemo"
      }), ", импортированную из ", jsx(_components.code, {
        children: "solid-js"
      }), ". В этом примере пересчет значения становится все дороже с каждым кликом. Если мы заключим его в ", jsx(_components.code, {
        children: "createMemo"
      }), ", он будет пересчитан только один раз за клик:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Поместите ", jsx(_components.code, {
        children: "console.log"
      }), " в функцию ", jsx(_components.code, {
        children: "fib"
      }), ", чтобы узнать, как часто она запускается:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fib = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'Calculating Fibonacci'"
        }), ");\n\t", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "fibonacci"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "());\n});\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-5ecd36a6.js.map
