{"componentChunkName":"component---src-templates-docs-js","path":"/docs/strict-mode.html","result":{"data":{"markdownRemark":{"html":"<p><code class=\"gatsby-code-text\">StrictMode</code> — инструмент для обнаружения потенциальных проблем в приложении. Также как и <code class=\"gatsby-code-text\">Fragment</code>, <code class=\"gatsby-code-text\">StrictMode</code> не рендерит видимого UI. Строгий режим активирует дополнительные проверки и предупреждения для своих потомков.</p>\n<blockquote>\n<p>Примечание:</p>\n<p>Проверки строгого режима работают только в режиме разработки; <em>они не оказывают никакого эффекта в продакшен-сборке</em>.</p>\n</blockquote>\n<p>Строгий режим может быть включён для любой части приложения. Например:\n<div class=\"gatsby-highlight\">\n        <pre class=\"gatsby-code-jsx\"><code><span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">ExampleApplication</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span>\n<span class=\"token plain-text\">      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Header</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\"></span>\n<span class=\"gatsby-highlight-code-line\"><span class=\"token plain-text\">      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">React.StrictMode</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span></span><span class=\"token plain-text\">        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span>\n<span class=\"token plain-text\">          </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">ComponentOne</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\"></span>\n<span class=\"token plain-text\">          </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">ComponentTwo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\"></span>\n<span class=\"token plain-text\">        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span>\n<span class=\"gatsby-highlight-code-line\"><span class=\"token plain-text\">      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">React.StrictMode</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"></span></span><span class=\"token plain-text\">      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Footer</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\"></span>\n<span class=\"token plain-text\">    </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre>\n        </div></p>\n<p>В примере выше проверки строгого режима <em>не</em> будут выполняться для компонентов <code class=\"gatsby-code-text\">Header</code> и <code class=\"gatsby-code-text\">Footer</code>. Однако будут выполнены для <code class=\"gatsby-code-text\">ComponentOne</code> и <code class=\"gatsby-code-text\">ComponentTwo</code>, а также для всех их потомков.</p>\n<p>На данный момент <code class=\"gatsby-code-text\">StrictMode</code> помогает в:</p>\n<ul>\n<li><a href=\"#identifying-unsafe-lifecycles\">Обнаружении небезопасных методов жизненного цикла</a></li>\n<li><a href=\"#warning-about-legacy-string-ref-api-usage\">Предупреждении об использовании устаревшего API строковых реф</a></li>\n<li><a href=\"#warning-about-deprecated-finddomnode-usage\">Предупреждении об использовании устаревшего метода findDOMNode</a></li>\n<li><a href=\"#detecting-unexpected-side-effects\">Обнаружении неожиданных побочных эффектов</a></li>\n<li><a href=\"#detecting-legacy-context-api\">Обнаружении устаревшего API контекста</a></li>\n</ul>\n<p>Дополнительные проверки будут включены в будущих релизах React.</p>\n<h3 id=\"identifying-unsafe-lifecycles\"><a href=\"#identifying-unsafe-lifecycles\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Обнаружение небезопасных методов жизненного цикла </h3>\n<p><a href=\"/blog/2018/03/27/update-on-async-rendering.html\">В этой статье</a> рассматриваются причины, почему некоторые методы жизненного цикла небезопасно использовать в асинхронных React-приложениях. Если в приложении подключены сторонние библиотеки, то отследить использование таких методов довольно тяжело. К счастью, тут может помочь строгий режим!</p>\n<p>Когда строгий режим включён, React составляет список всех классовых компонентов, которые используют небезопасные методы жизненного цикла, и отображает информацию о них таким образом:</p>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e4fdbff774b356881123e69ad88eda88/1628f/strict-mode-unsafe-lifecycles-warning.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 13.80952380952381%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAjElEQVQI112Oaw6CQAwGuf/RRBcJETWR8Fh5BNZkuUDHFkw0/pjka9NOm8jJIYcUSY87LkPOOXIpoa4R75G+h7aFpoFxhHWFGL9Y/SHBFlXA7Q7lFR4VdB5M5J977jqYJhgGlaq4qvaeoXPbMT1uJCHLWJwjFAUvFc/67ZznRPsmBGRZNixvWP6t//pvEpXgSjHsOOkAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"strict mode unsafe lifecycles warning\"\n        title=\"\"\n        src=\"/static/e4fdbff774b356881123e69ad88eda88/1e088/strict-mode-unsafe-lifecycles-warning.png\"\n        srcset=\"/static/e4fdbff774b356881123e69ad88eda88/65ed1/strict-mode-unsafe-lifecycles-warning.png 210w,\n/static/e4fdbff774b356881123e69ad88eda88/d10fb/strict-mode-unsafe-lifecycles-warning.png 420w,\n/static/e4fdbff774b356881123e69ad88eda88/1e088/strict-mode-unsafe-lifecycles-warning.png 840w,\n/static/e4fdbff774b356881123e69ad88eda88/1628f/strict-mode-unsafe-lifecycles-warning.png 1232w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Если избавиться от проблем, выявленных в строгом режиме, <em>уже сегодня</em>, то это позволит получить все преимущества конкурентного рендеринга в будущих релизах React.</p>\n<h3 id=\"warning-about-legacy-string-ref-api-usage\"><a href=\"#warning-about-legacy-string-ref-api-usage\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Предупреждение об использовании устаревшего API строковых реф </h3>\n<p>Ранее React предоставлял два способа управления рефами: устаревшие строковые рефы и колбэк API. Хотя строковые рефы и были более удобным способом, они имели <a href=\"https://github.com/facebook/react/issues/1373\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">несколько недостатков</a>. Поэтому мы рекомендовали <a href=\"/docs/refs-and-the-dom.html#legacy-api-string-refs\">использовать колбэки вместо них</a>.</p>\n<p>В React 16.3 добавлен третий способ, который предлагает удобство строковых рефов и лишён каких-либо недостатков:\n<div class=\"gatsby-highlight\">\n        <pre class=\"gatsby-code-jsx\"><code><span class=\"token keyword\">class</span> <span class=\"token class-name\">MyComponent</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">super</span><span class=\"token punctuation\">(</span>props<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>inputRef <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">createRef</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></span>  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>input</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>text<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">ref</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>inputRef<span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span></span>  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>inputRef<span class=\"token punctuation\">.</span>current<span class=\"token punctuation\">.</span><span class=\"token function\">focus</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></span>  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n        </div></p>\n<p>Поскольку объекты-рефы стали заменой строковых реф, строгий режим теперь предупреждает об использовании строковых реф.</p>\n<blockquote>\n<p><strong>Примечание:</strong></p>\n<p>Колбэк-рефы по-прежнему поддерживаются вместе с новым API-методом <code class=\"gatsby-code-text\">createRef</code>.</p>\n<p>Вам не обязательно заменять колбэк-рефы в ваших компонентах. Их использование более гибкое, поэтому они считаются продвинутой возможностью.</p>\n</blockquote>\n<p><a href=\"/docs/refs-and-the-dom.html\">Ознакомьтесь с новым API-методом <code class=\"gatsby-code-text\">createRef</code> здесь.</a></p>\n<h3 id=\"warning-about-deprecated-finddomnode-usage\"><a href=\"#warning-about-deprecated-finddomnode-usage\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Предупреждение об использовании устаревшего метода findDOMNode </h3>\n<p>Ранее React использовал <code class=\"gatsby-code-text\">findDOMNode</code> для поиска DOM-узла в дереве по указанному экземпляру класса. В большинстве случаев этот метод не используется, поскольку можно <a href=\"/docs/refs-and-the-dom.html#creating-refs\">привязать реф непосредственно к DOM-узлу</a>.</p>\n<p><code class=\"gatsby-code-text\">findDOMNode</code> может использоваться для классовых компонентов, однако это нарушает уровни абстракции, позволяя родительскому компоненту требовать, чтобы происходил рендер определённого дочернего элемента. Это приводит к проблемам при рефакторинге, когда не удаётся изменить детали реализации компонента, так как родитель может использовать DOM-узел этого компонента. <code class=\"gatsby-code-text\">findDOMNode</code> возвращает только первый дочерний элемент, но с использованием фрагментов компонент может рендерить несколько DOM-узлов. <code class=\"gatsby-code-text\">findDOMNode</code> выполняет поиск только один раз. Затем метод возвращает ранее полученный результат при вызове. Если дочерний компонент рендерит другой узел, то это изменение никак не отследить. Поэтому <code class=\"gatsby-code-text\">findDOMNode</code> работает, только когда компоненты возвращают единственный и неизменяемый DOM-узел.</p>\n<p>Вместо этого, можно передать реф в компонент и передать его далее в DOM используя <a href=\"/docs/forwarding-refs.html#forwarding-refs-to-dom-components\">перенаправление рефов</a>.</p>\n<p>Также можно добавить компоненту DOM-узел как обёртку и прикрепить реф непосредственно к этой обёртке.</p>\n<div class=\"gatsby-highlight has-highlighted-lines\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">MyComponent</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">super</span><span class=\"token punctuation\">(</span>props<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>wrapper <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">createRef</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></span>  <span class=\"token punctuation\">}</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"gatsby-highlight-code-line\">    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">ref</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>wrapper<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>props<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span></span>  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<blockquote>\n<p>Примечание:</p>\n<p>CSS-выражение <a href=\"https://developer.mozilla.org/ru/docs/Web/CSS/display#display_contents\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code class=\"gatsby-code-text\">display: contents</code></a> может применяться для исключения узла из макета (layout).</p>\n</blockquote>\n<h3 id=\"detecting-unexpected-side-effects\"><a href=\"#detecting-unexpected-side-effects\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Обнаружение неожиданных побочных эффектов </h3>\n<p>React работает в два этапа:</p>\n<ul>\n<li><strong>Этап рендеринга (render phase)</strong> определяет, какие изменения необходимо произвести, например, в DOM. В течение этого этапа React вызывает <code class=\"gatsby-code-text\">render</code>, а затем сравнивает полученный результат с результатом предыдущего рендера.</li>\n<li><strong>Этап фиксации (commit phase)</strong> — в нём React применяет любые изменения. В случае React DOM — это этап, когда React вставляет, обновляет и удаляет DOM-узлы. В течение этого этапа React вызывает методы жизненного цикла <code class=\"gatsby-code-text\">componentDidMount</code> и <code class=\"gatsby-code-text\">componentDidUpdate</code>.</li>\n</ul>\n<p>Этап фиксации обычно не занимает много времени, что нельзя сказать про этап рендеринга. По этой причине, готовящийся конкурентный режим (который по умолчанию ещё не включён) делит работу на части, периодически останавливает и возобновляет работу, чтобы избежать блокировки браузера. Это означает, что на этапе рендеринга React может вызвать методы жизненного цикла более чем один раз перед фиксацией, либо вызвать их без фиксации (из-за возникновения ошибки или прерывания с большим приоритетом).</p>\n<p>Этап рендеринга включает в себя следующие методы жизненного цикла:</p>\n<ul>\n<li><code class=\"gatsby-code-text\">constructor</code></li>\n<li><code class=\"gatsby-code-text\">componentWillMount</code> (или <code class=\"gatsby-code-text\">UNSAFE_componentWillMount</code>)</li>\n<li><code class=\"gatsby-code-text\">componentWillReceiveProps</code> (или <code class=\"gatsby-code-text\">UNSAFE_componentWillReceiveProps</code>)</li>\n<li><code class=\"gatsby-code-text\">componentWillUpdate</code> (или <code class=\"gatsby-code-text\">UNSAFE_componentWillUpdate</code>)</li>\n<li><code class=\"gatsby-code-text\">getDerivedStateFromProps</code></li>\n<li><code class=\"gatsby-code-text\">shouldComponentUpdate</code></li>\n<li><code class=\"gatsby-code-text\">render</code></li>\n<li>Функции обновления <code class=\"gatsby-code-text\">setState</code> (первый аргумент)</li>\n</ul>\n<p>Поскольку вышеупомянутые методы могут быть вызваны более одного раза, важно, чтобы они не приводили к каким-либо побочным эффектам. Игнорирование этого правила может привести к множеству проблем, включая утечки памяти и недопустимое состояние приложения. К сожалению, такие проблемы тяжело обнаружить из-за их <a href=\"https://ru.wikipedia.org/wiki/%D0%94%D0%B5%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9_%D0%B0%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">недетерминированности</a>.</p>\n<p>Строгий режим не способен автоматически обнаруживать побочные эффекты, но помогает их отследить, сделав более детерминированными. Такое поведение достигается путём двойного вызова следующих методов:</p>\n<ul>\n<li>Метод <code class=\"gatsby-code-text\">constructor</code>, <code class=\"gatsby-code-text\">render</code>, и <code class=\"gatsby-code-text\">shouldComponent</code> классового компонента</li>\n<li>Статический метод классового компонента <code class=\"gatsby-code-text\">getDerivedStateFromProps</code></li>\n<li>Тело функционального компонента</li>\n<li>Функции обновления (первый аргумент <code class=\"gatsby-code-text\">setState</code>)</li>\n<li>Функции, переданные в <code class=\"gatsby-code-text\">useState</code>, <code class=\"gatsby-code-text\">useMemo</code>, или <code class=\"gatsby-code-text\">useReducer</code></li>\n</ul>\n<blockquote>\n<p>Примечание:</p>\n<p>Это применимо только в режиме разработки. <em>Методы жизненного цикла не вызываются дважды в продакшен-режиме.</em></p>\n</blockquote>\n<p>Рассмотрим следующий пример:\n<div class=\"gatsby-highlight\">\n        <pre class=\"gatsby-code-jsx\"><code><span class=\"token keyword\">class</span> <span class=\"token class-name\">TopLevelRoute</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">super</span><span class=\"token punctuation\">(</span>props<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    SharedApplicationState<span class=\"token punctuation\">.</span><span class=\"token function\">recordEvent</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ExampleComponent'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n        </div></p>\n<p>На первый взгляд данный пример не кажется проблемным. Но если метод <code class=\"gatsby-code-text\">SharedApplicationState.recordEvent</code> не является <a href=\"https://ru.wikipedia.org/wiki/%D0%98%D0%B4%D0%B5%D0%BC%D0%BF%D0%BE%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C#%D0%92_%D0%B8%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8%D0%BA%D0%B5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">идемпотентным</a>, тогда создание этого компонента несколько раз может привести к недопустимому состоянию приложения. Такие труднонаходимые ошибки могут никак не проявить себя во время разработки или быть настолько редкими, что останутся незамеченными.</p>\n<p>Двойной вызов таких методов, как конструктор компонента, позволяет строгому режиму легко обнаружить подобные проблемы.</p>\n<h3 id=\"detecting-legacy-context-api\"><a href=\"#detecting-legacy-context-api\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Обнаружение устаревшего API контекста </h3>\n<p>Использование устаревшего API контекста очень часто приводило к ошибкам и поэтому он будет удалён в будущей мажорной версии. Пока что этот API доступен во всех релизах 16.x, но в строгом режиме будет выведено следующее предупреждение:</p>\n<p>\n  <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fca5c5e1fb2ef2e2d59afb100b432c12/51800/warn-legacy-context-in-strict-mode.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n  \n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 18.57142857142857%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAsklEQVQI1z2O226DMBBE+f8/axM3JGkL+AakkEixcUxfK2aybqVKR0c7LztT/eiGR4X3muqFpzfWe1jNwdEbOk0nNhg8ppFjD9uxt5wuWLNQId6hm023YnyeYdptidsjbakYhQXpF7nzozhFxIAlVPSWX0P5d5s5Txw8Lz2lYex5ndE18BbewGlIs2DaEmWL01U8qHSqxUHtlo9zqlU87IN6DV2zXmd+r38LCzmX5v+45iddvdtOYuXXpwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"warn legacy context in strict mode\"\n        title=\"\"\n        src=\"/static/fca5c5e1fb2ef2e2d59afb100b432c12/1e088/warn-legacy-context-in-strict-mode.png\"\n        srcset=\"/static/fca5c5e1fb2ef2e2d59afb100b432c12/65ed1/warn-legacy-context-in-strict-mode.png 210w,\n/static/fca5c5e1fb2ef2e2d59afb100b432c12/d10fb/warn-legacy-context-in-strict-mode.png 420w,\n/static/fca5c5e1fb2ef2e2d59afb100b432c12/1e088/warn-legacy-context-in-strict-mode.png 840w,\n/static/fca5c5e1fb2ef2e2d59afb100b432c12/51800/warn-legacy-context-in-strict-mode.png 1196w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  \n  </a>\n    </p>\n<p>Ознакомьтесь с <a href=\"/docs/context.html\">документацией нового API контекста</a>, чтобы упростить переход на новую версию.</p>","frontmatter":{"title":"Строгий режим","next":null,"prev":null},"fields":{"path":"content/docs/strict-mode.md","slug":"docs/strict-mode.html"}}},"pageContext":{"slug":"docs/strict-mode.html"}},"staticQueryHashes":[]}