1. Изменения в жизненном цикле React 16

componentWillMount，componentWillReceiveProps, componentWillUpdate готов отменить. Причина: в основном жизненный цикл перед рендерингом версии 16 может выполняться несколько раз.static getDerivedStateFromProps和 getSnapshotBeforeUpdateДобавлено для дополнения жизненного цикла, описанного выше.

2. Редукс

Роль Магазина — это центр хранения данных всего приложения, в котором сосредоточены данные о состоянии, необходимые большинству страниц; ActionCreators — посредник между уровнем представления и уровнем данных; Reduce , который получает действие и обновляет Store. Таким образом, процесс заключается в том, что пользователь запускает ActionCreator через компонент интерфейса, переносит старое состояние и действие в хранилище и перетекает в редюсер, а редюсер возвращает новое состояние и обновляет интерфейс.

Redux на самом деле является публикацией и подпиской, но Redux может сделать данные предсказуемыми и иметь обратную силу.

Есть только два основных компонента react-redux, Provider и connect.Provider хранит данные, хранящиеся в Redux, в контексте, получает данные из контекста через соединение и передает их компоненту, обернутому соединением через реквизиты.

3. Безопасность сети

XSS: переход на веб-страницу плагина вредоносного кода скрипта, когда пользователь просматривает страницу, код скрипта, встроенный в сеть, будет выполняться, тем самым достигая цели злонамеренной атаки пользователей.

Решение: теперь это решено в зрелой среде. HttpOnly предотвращает захват файлов cookie Проверка пользовательского ввода Проверка вывода на стороне сервера

csrf: Атака CSRF заключается в том, что злоумышленник использует файл cookie жертвы, чтобы обмануть доверие сервера, и может подделать запросы от имени жертвы и отправить их на атакуемый сервер без ведома жертвы, чтобы выполнить авторизацию без авторизации. под защитой.

Решение: две характеристики CSRF:

CSRF (обычно) происходит на сторонних доменах. Злоумышленники CSRF не могут получить такую информацию, как файлы cookie, а только используют их. Для этих двух пунктов мы можем сформулировать специальные стратегии защиты следующим образом:

Блокировать доступ с неизвестных иностранных доменов Обнаружение гомологии Куки того же сайта Информация, которую необходимо прикрепить к этому домену при отправке CSRF-токен Двухфакторная аутентификация с помощью файлов cookie

4. Кэш

Кэш браузера делится на сильный кеш и кеш согласования.Сильный кеш будет напрямую получать данные из браузера, а кеш согласования сначала посетит сервер, чтобы проверить, истек ли срок действия кеша, а затем решит, следует ли получать данные из браузер. Поля, управляющие сильным кэшированием: Expires и Cache-Control, Expires и Cache-Control. Поля, управляющие кэшем согласования: Last-Modified/If-Modified-Since и Etag/If-None-Match, где Etag/If-None-Match имеет более высокий приоритет, чем Last-Modified/If-Modified-Since.

5. Междоменный

Почему существует междоменный

同源策略的限制：同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

Ограничения политики одного и того же происхождения включают:

файлы cookie, LocalStorage, IndexedDB и т. д.
DOM-узел
http请求的结果被浏览器拦截

Но есть три свойства, которые разрешают междоменный доступ:

<img src=XXX>
<link href=XXX>
<script src=XXX>

jsonp

использовать<script>Теги не имеют междоменных ограничений, и веб-страницы могут получать данные JSON, динамически генерируемые из других источников. Запросы JSONP должны поддерживаться сервером другой стороны.

Дефект небезопасен Только получить метод

cors

CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

Браузер будет автоматически осуществлять связь CORS, а ключом к реализации связи CORS является серверная часть. Пока серверная часть реализует CORS, реализуется междоменный доступ. Сервер может установить Access-Control-Allow-Origin для включения CORS. Этот атрибут указывает, какие доменные имена могут получить доступ к ресурсу. Если установлен подстановочный знак, это означает, что все веб-сайты могут получить доступ к ресурсу.

postMessage

postMessage — это API в HTML5 XMLHttpRequest Level 2 и один из немногих атрибутов окна, которые могут работать между доменами. Его можно использовать для решения следующих проблем:

Передача данных страницы и новое окно, которое она открывает
Передача сообщений между несколькими окнами
Страницы с вложенными сообщениями iframe
Междоменная передача данных в описанных выше трех сценариях

// a.html
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe> //等它加载完触发一个事件
  //内嵌在http://localhost:3000/a.html
    <script>
      function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('我爱你', 'http://localhost:4000') //发送数据
        window.onmessage = function(e) { //接受返回数据
          console.log(e.data) //我不爱你
        }
      }
    </script>

// b.html
  window.onmessage = function(e) {
    console.log(e.data) //我爱你
    e.source.postMessage('我不爱你', e.origin)
 }

Websocket

Прокси промежуточного ПО узла (дважды междоменный)

обратный прокси nginx

window.name

localtion.hash

document.domain

6. HTTPS

HTTP — это протокол передачи открытого текста, а протокол HTTPS — это сетевой протокол, созданный на основе протокола SSL + HTTP для зашифрованной передачи и аутентификации личности, который является более безопасным, чем протокол HTTP.
Что касается безопасности, то простейшая аналогия для описания отношений между ними состоит в том, что грузовики доставляют товары. С другой стороны, https — это закрытый контейнер, и безопасность, естественно, значительно улучшена.
HTTPS более безопасен, чем HTTP, более удобен для поисковых систем и выгоден для SEO.Google и Baidu предпочтительно индексируют HTTPS-страницы;
HTTPS требует SSL-сертификат, а HTTP — нет;
стандартный порт HTTPS 443, стандартный порт HTTP 80;
HTTPS основан на транспортном уровне, HTTP основан на прикладном уровне;
HTTPS отображает зеленый замок безопасности в браузере, а HTTP — нет;

Семь, принцип вебпака

Параметры инициализации: чтение и объединение параметров из файлов конфигурации и операторов оболочки;
Начать компиляцию: используйте объект компилятора инициализации, полученный на предыдущем шаге, загрузите все настроенные плагины и выполните метод запуска объекта, чтобы начать компиляцию;
Определить запись: найти все файлы записей в соответствии с записью в конфигурации
Скомпилируйте модуль: начиная с файла записи, вызовите все настроенные загрузчики для компиляции модуля, а затем найдите модули, от которых зависит модуль, повторите этот шаг, пока все файлы, зависящие от записи, не будут обработаны на этом шаге;
Завершение компиляции модуля: После перевода всех модулей с помощью Loader на шаге 4 получается финальное содержимое каждого модуля после перевода и зависимости между ними;
Выходные ресурсы: в соответствии с зависимостями между записями и модулями соберите фрагменты, содержащие несколько модулей, один за другим, а затем преобразуйте каждый фрагмент в отдельный файл и добавьте его в список выходных данных.Этот шаг — последний шанс изменить выходное содержимое. ;
Вывод завершен: после определения содержимого вывода определите путь вывода и имя файла в соответствии с конфигурацией и запишите содержимое файла в файловую систему.

Восемь, принцип Вавилона

Процесс перевода babel делится на три этапа:parsing、transforming、generating, взяв в качестве примера перевод кода ES6 в код ES5, конкретный процесс перевода babel выглядит следующим образом:

1. ES6代码输入
2. babylon 进行解析得到 AST
3. plugin 用 babel-traverse 对 AST 树进行遍历转译,得到新的AST树
4. 用 babel-generator 通过 AST 树生成 ES5 代码

Девять, понимание виртуального DOM

本质上是 JavaScript 对象，这个对象就是更加轻量级的对 DOM 的描述。

对于 DOM 这么多属性，其实大部分属性对于做 Diff 是没有任何用处的，所以如果用更轻量级的 JS 对象来代替复杂的 DOM 节点，然后把对 DOM 的 diff 操作转移到 JS 对象，就可以避免大量对 DOM 的查询操作。这个更轻量级的 JS 对象就称为 Virtual DOM 。

Итак, теперь процесс такой:

Поддерживать виртуальный DOM, представленный объектами JS, однозначное соответствие с реальным DOM
Выполните diff для двух виртуальных DOM до и после, чтобы создать мутацию (мутацию).
Применить изменения к реальному DOM, создав последний реальный DOM

Можно видеть, что, поскольку изменения применяются к реальному DOM, по-прежнему неизбежно напрямую манипулировать DOM, но алгоритм сравнения React минимизирует количество изменений DOM.

Десять, разница между модулем es и commonjs

Первый — это ссылка на значение, а второй — его копия.
Первый выводит интерфейс во время компиляции, а второй загружает его во время выполнения.

Одиннадцать, как сделать динамическую загрузку в реакции

react.lazy

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: 'lazyComponent'*/ "../components/LazyComponent")
);

С напряжением,

return (
        <div>
            <MainComponet />
            <React.Suspense fallback={<div>正在加载中</div>}>
                <LazyComponent />
            </React.Suspense>
        </div>
    )

В качестве запасного варианта его можно изменить на любой счетчик, и на этот раз мы не будем слишком много оптимизировать. React выдаст вам ошибку, если вы не используете React.suspense, поэтому не забудьте использовать React.lazy с React.Suspense. На данный момент мы можем видеть из сетевого запроса, что динамически загружаемый lazyComponent упакован отдельно в пакет.

return (
        <div>
            <MainComponet />
            {this.state.showLazyComponent && (
                <React.Suspense fallback={<div>正在加载中</div>}>
                    <LazyComponent />
                </React.Suspense>
            )}
        </div>
    )

Кроме того, динамическая загрузка через WebPack: импорт () и убедитесь .REQUIRE.

11. Процесс выполнения новых

Создать пустой объект
Укажите _proto_ объекта на прототип конструктора
используйте этот конструктор как этот объект this
вернуть этот объект

function myNew(Con,...args) {
    let obj = Object.create(Con.prototype);
    let result = obj.apply(Con,args);
    return typeof result === 'object' ? result : obj;
}