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: "fine-grained"
      }), ") реактивности в Solid заключается в том, что он может обрабатывать вложенные обновления независимо друг от друга. Например, если у нас есть список пользователей в котором обновилось одно имя, то Solid обновит лишь одно место в DOM не перерендеривая весь список. Очень немногие (даже реактивные) UI-фреймворки могут это сделать."]
    }), "\n", jsxs(_components.p, {
      children: ["Как мы этого добились? Давайте рассмотрим это на примере списка задач в Сигнале. Чтобы пометить задачу как выполненную, нам нужно заменить ее клоном. Несмотря на то, что так работает большинство фреймворков, это далеко от ресурсоэффективного подхода, поскольку мы повторно запускаем алгоритм вычисления различий (", jsx(_components.code, {
        children: "diffing algorithm"
      }), ") и воссоздаем элементы DOM, как показано в ", jsx(_components.code, {
        children: "console.log"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "(\n    ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), ") =>"]
        }), " (todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " !== id ? todo : { ...todo, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": !todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "completed"
        }), " })),\n  );\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Вместо этого в библиотеке с точной реактивностью, такой как Solid, мы инициализируем данные вложенными Сигналами следующим образом:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [completed, setCompleted] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "([...", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "(), { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, completed, setCompleted }]);\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Теперь мы можем обновить данные с помощью вызова ", jsx(_components.code, {
        children: "setCompleted"
      }), " без вычисления различий. Это возможно потому, что мы перенесли вычисления на уровень данных, вместо вычислений на уровне элементов DOM. Такой подход позволяет точно знать каким образом данные изменяются."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " index = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "().", jsx(_components.span, {
          className: "hljs-title function_",
          children: "findIndex"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "t"
          }), ") =>"]
        }), " t.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " todo = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "todos"
        }), "()[index];\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (todo) todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCompleted"
        }), "(!todo.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "completed"
        }), "())\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Если мы изменим все оставшиеся ссылки с ", jsx(_components.code, {
        children: "todo.completed"
      }), " на ", jsx(_components.code, {
        children: "Сигналы"
      }), " ", jsx(_components.code, {
        children: "todo.completed()"
      }), ", то мы будем видеть вызов ", jsx(_components.code, {
        children: "console.log"
      }), " только при создании элемента, а не при переключении."]
    }), "\n", jsx(_components.p, {
      children: "Безусловно, это требует ручного контроля и понимания как устроена ваши данные и в недалеком прошлом это был единственный способ добиться эффективного рендеринга. Но теперь, благодаря прокси мы можем выполнять большую часть этой работы в фоновом режиме без какой-либо ручной работы. В следующих главах мы рассмотрим механизм, позволяющий Solid реализовать эффективную и точную систему обновлений."
    })]
  });
}
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-7d770fa7.js.map
