Воплощение доброты кода
Вступление
Есть эта захватывающая идея, которая не покидает меня вот уже много лет, что разработчики программного обеспечения со всеми своими предрассудками, предубеждениями и человечностью в целом формируют мир вокруг нас.
Думаю об этом. Программное обеспечение, как и музыка, является нематериальным благом. Это не вино или шоколад, где сырье может ограничивать количество продукта, а следовательно, и количество людей, которым он нравится. Существуют тысячи программных продуктов, написанных отдельными людьми в субботу вечером и используемых миллионами людей во всем мире.
Справедливо заключить, что эти люди оказывают большое или маленькое влияние на жизнь людей. И даже если мы рассмотрим корпорации, количество людей, производящих программное обеспечение, является микроскопическим числом по отношению к количеству указанных пользователей программного обеспечения. Например, у Google ~ 18K инженеров по всему миру, в то время как Google используют около 1,17 миллиарда человек, что составляет 0,000015%. Мы видим огромную зависимость от мнений и идей разработчиков программного обеспечения по формированию мира. Очевидно, что существует общество разработчиков и субкультура. И если мем или идея распространятся в этом обществе, это неизбежно повлияет на технологию, используемую всеми.
А теперь представьте себе в научной фантастике, что существует воображаемая программная технология, решающая мировую проблему. Скажите, что это может вылечить рак или полностью избавить от бедности. Но цена этой технологии разрушает жизнь разработчика программного обеспечения, который ее использует. Увидит ли когда-нибудь свет эта технология? Едва ли. Эта воображаемая история - яркий пример конфликта интересов между разработчиком программного обеспечения и конечным пользователем. Если хорошее программное обеспечение означало, что разработчику неудобно, мы не увидим хорошего программного обеспечения. И большая часть жизни разработчиков программного обеспечения - это сообщения об ошибках. Они являются ключом к получению опыта, и внимание к ним имеет большое значение. Они напрямую важны для разработчика и косвенно важны для каждого из нас.
Реагировать
Из всех библиотек и пакетов, которые я использовал за последние ~ 10 лет, я не видел библиотеки, в которой ошибки и предупреждения были бы такими красивыми. Разработчики, включая меня, обычно пытаются обнаружить ошибки, нарушающие их собственный код, и сообщить о них пользователю вместе с данными, которые у них есть под рукой (объем?). Возможно, упомяните наиболее частую ошибку, которая может вызвать ошибку, вместе с автоматически сгенерированной трассировкой стека, и все.
TypeError: undefined is not an object
Но с React библиотека работает сверхурочно, пытаясь угадать, что пошло не так. Попытка угадать ошибку совершенно очевидна и чрезвычайно полезна; это сэкономит вам много времени на отладку и сделает все возможное, чтобы спасти ваш день.
Чтобы помочь вам получить такой же опыт, как я пишу приложения на React, я сделаю эту статью легкой поездкой. Я покажу фрагменты React с ошибками в них, вы можете попытаться найти проблему или просто посмотрите предупреждение / ошибку ниже и решите, было ли это полезно для вас. Это не для того, чтобы перечислять все журналы сообщений React. Это очень маленький образец для вдохновения.
Давайте начнем!
1. Простой
Что не так с этим компонентом?
Вот сообщение:
Warning: MyComponent(…): No `render` method found on the returned component instance: you may have forgotten to define `render`.
Красиво, не правда ли? Название компонента и правильное предложение. Очень легко исправить.
2. Более сложный
В чем проблема?
Вот сообщение:
Warning: MyComponent has a method called componentDidUnmount(). But there is no such lifecycle method. Did you mean componentWillUnmount()?
Здесь React старался изо всех сил. Он ожидал, что вы сделаете эту ошибку, и ждал вас там. В этом случае тишина не сломает React, а только сломает ваше приложение. Достаточно отзывчивый к библиотеке.
3. Немного очевидный
В чем проблема?
Вот предупреждение:
Warning: Cannot update during an existing state transition (such as within `render` or another component’s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
4. Не совсем очевидно
В чем проблема?
Вот сообщение:
Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the MyComponent component.
5. Чистая элегантность
Что не так с type здесь?
Вот предупреждение:
Warning: Received `true` for non-boolean attribute `type`. If this is expected, cast the value to a string. in input
И это еще один пример ошибки, которая не влияет на React, а скорее влияет на ваше приложение.
6. Спасатель для начинающих.
Два предупреждения:
Warning: <greetingComponent /> is using uppercase HTML. Always use lowercase HTML tags in React. Warning: The tag <greetingComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Я определенно попался на это хотя бы раз.
7. Хорошо, я исправил, но все равно не работает
Что случилось сейчас?
Сообщение:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
Ага, должно быть:
ReactDOM.render(<GreetingComponent />, document.getElementById(“root”));
8. Очень частая ошибка в первые пару дней.
Что здесь наверху?
Сообщение:
Warning: Invalid DOM property `class`. Did you mean `className`? in h1 (created by GreetingComponent) in GreetingComponent
Достаточно данных, чтобы убедить вас именно в вашей ошибке
9. Почему ты не вернешься? 🎼
Ты попрощался
Я пытался скрыть то, что чувствовал внутри
Пока ты не прошел мимо меня
Ты сказал, что вернешься
Ты когда-нибудь вернешься? 🎵
Uncaught Error: GreetingComponent(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
10. И тот, которому пример не нужен:
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Это мой личный фаворит.
Очевидно, я не использовал все существующие фреймворки и библиотеки. И могут быть лучшие примеры хороших и полезных сообщений об ошибках. Но как фронтенд-разработчик могу с уверенностью сказать, что React легко выделяется. Меня это вдохновило, и теперь я изо всех сил пытаюсь угадать области, в которых пользователи моего кода могут допустить ошибки, и предоставить им подробные и полезные сообщения об ошибках, когда они это сделают. Потому что я искренне верю, что лучший опыт разработчика означает лучший мир.
Если вы знаете еще несколько хороших примеров предупреждений React, не стесняйтесь упоминать их в комментариях, и я их добавлю.
