Блог

Недавно я хорошо использую react hook. однако иногда я задаюсь вопросом, подходит ли мой стиль кодирования.

 let mDown = false;
let timerId = null;

function App() {
  useEffect(() => {
    mDown = true
    ....
  }, [])
}
  

Как и в нижнем коде, я объявляю переменную вне функции. и я хочу использовать общую переменную и доступ, изменить это значение без использования состояния.

Это анти-шаблон?

Спасибо за чтение. 🙂

да, конечно. вы можете использовать общую переменную не только в функции hook, но и в любых других методах приложения.

однако лучше всего создавать глобальные переменные в других файлах js, таких как constant.js , и импортируйте их в приведенную выше часть файла.

 import { mDown, timerId } from '../constant'
  

Итак, давайте подумаем с точки зрения компонентов. Я имею в виду, давайте на некоторое время проигнорируем, что их едва ли будет больше одного <App /> , но подумайте о компонентно-ориентированном подходе в целом.

Вы имеете в виду некоторые данные, независимые для экземпляра каждого компонента? Затем вы используете useState (если изменение этих данных должно повторно отображать компонент) или useRef (если обновление этого никогда не должно вызывать повторный рендеринг).

Или эти данные должны быть разделены между всеми компонентами? Тогда, опять же, это зависит. Иногда глобальная переменная подходит (реальная глобальная переменная, как свойство window объекта), иногда лучше поместить ее в контекстный API или любой уровень управления состоянием (Mobx, Redux) вместо этого.

Почему у вас нет переменной уровня модуля, как вы собираетесь? Я вижу несколько причин (опять же, может быть, не имеет большого значения для точного случая с <App /> ):

1. Переменная уровня модуля привязывается к экземпляру модуля. Если мы когда-нибудь закончим с несколькими версиями одного и того же компонента в одном приложении, у них будут собственные экземпляры такой переменной. Подумайте о <Dropdown /> компоненте и некоторой переменной, созданной для свертывания всех других экземпляров, как только некоторые из них будут расширены. В случае с переменной уровня модуля, которую вы можете закрыть, некоторые выпадающие списки закрывают некоторые экземпляры — но не все — только если у вас используется несколько версий одного и того же пакета (например, в качестве зависимости 2-го уровня)
2. Нет доступа и нет изоляции — сложно выполнить модульное тестирование.

И, наконец: какая здесь может быть прибыль?