Не позволяйте инструментам React dev изменять реквизит / состояние

Question

Есть ли способ предотвратить какие-либо изменения пропеллера / состояния от переднего плана на производстве?

Я попробовал следующее, но это полностью отключает инструменты dev:

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
  for (let [ key, value ] of Object.entries(
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__
  )) {
     window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] =
       typeof value === 'function' ? () => {} : null;
  }
}    

Answer 1

Я использую следующий фрагмент кода в моем приложении Meteor, которое использует React 16.3 в качестве библиотеки пользовательского интерфейса.

window.__ALLOW_REACT_DEVTOOLS__ это просто флаг, который я установил в html SSR, отправляемом с сервера, потому что эта строка кода должна исключать любой код React, и он мне нужен раньше process.env доступно в браузере. На сервере я установил это значение на false в производстве.

<script>
  if (
    !window.__ALLOW_REACT_DEVTOOLS__ &&
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
    typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
  ) {
    for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
    }
  }

  delete window.__ALLOW_REACT_DEVTOOLS__;
</script>

Ключом к выполнению этой работы является то, что она загружается ДО React.

Это полностью отключит React-Devtools. Когда вы нажимаете на вкладку devtools, она просто скажет "Looking for React...".

Answer 2

Хорошо, нашел способ не дать даже этой функции быть введённой / вовлечённой.

Я просто изменил код блокировки:

// отключаем реакцию-инструменты для этого проекта

 if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
        for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
            window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
        }
    }