Если я добавлю PropTypes, мне нужно проверить typeof?

Question

У меня есть опора onNotifyChange, которая является функцией, и я вызываю ее в onChange входа.

И у него есть PropType для func.

MyComponent.propTypes = {
    onNotifyChange: PropTypes.func,
}

При вызове onNotifyChange, нужно ли мне проверять typeof

const onChange = e => {
    // do some stuff
    if(onNotifyChange && typeof onNotifyChange === 'function'){
        onNotifyChange()
    }
}

или просто проверять, не является ли это ложным?

const onChange = e => {
    // do some stuff
    if(onNotifyChange){
        onNotifyChange()
    }
}

Удаляет ли PropTypes.bar необходимость проверки typeof foo === 'bar'

Answer 1

Да, вам нужно проверять типы реквизита даже при использовании prop-types. Библиотека prop-types выдает предупреждения во время выполнения в режиме разработки React.

В приведенном ниже примере мы используем сборку разработки React. У нас есть компонент H1 с необходимой функцией prop. Обратите внимание, что при использовании компонента H1 в App без передачи значения для className выдается ошибка, и prop-types зарегистрировали предупреждение.

Таким образом, вы не можете положиться на prop-types, чтобы предотвратить передачу плохих реквизитов детям.

function H1({ className, children }) {
  // this will throw if className is not a function
  return <h1 className={className()}>{children}</h1>
}

H1.propTypes = {
  className: PropTypes.func.required
} 

function App() {
  return <H1>Test</H1>
}

ReactDOM.render(<App />, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script>
<div id=root></div>

Чтобы предотвратить подобные вещи во время выполнения, вы можете:

• объявить значение по умолчанию для пропеллера
• сделать проверку на значение реквизита в компоненте

Еще лучше, вы можете сделать оба, как в примере ниже:

function H1({ className, children }) {
  /* do some validation of your props 
     (throwing here to demonstrate that the default prop set below 
     works - I do not recommend throwing errors within components
     like this unless you know what you're doing, e.g. have an error
     boundary to catch behaviour like this) */
  if (typeof className !== "function") {
    throw new Error("expecting className prop to be function")
  }
  return <h1 className={className()}>{children}</h1>
}

H1.propTypes = {
  className: PropTypes.func.required
} 

H1.defaultProps = {
  className: () => ""
}

function App() {
  return <H1>Test</H1>
}

ReactDOM.render(<App />, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.development.js"></script>
<div id=root></div>

Таким образом, ваше приложение не обработает sh из-за неправильного значения пропа, и в режиме разработки вы увидите предупреждение, записанное prop-types.

Answer 2

Желательно определить defaultProps.

MyComponent.defaultProps = {
    onNotifyChange: () => false
}

Это позаботится о сценарии, в котором вы "забудете" передать onNotifyChange.

Без определения defaultProps вы будет сталкиваться,

Uncaught TypeError: _this10.props.onNotifyChange is not a function

Answer 3

Из пакета prop-types

и предупреждайте при разработке, если они не совпадают

Так что prop-types only "protect «Вы совершаете ошибки при разработке . Он не будет ничего делать, когда ваш код работает (кроме выдачи ошибок на консоли).

Если вам нужны жесткие проверки типов, используйте typcript ... Хотя даже те, которые выполняются только во время dev + время сборки, так что ... Ничто в JS не может защитить вас от неправильных типов во время выполнения (кроме явных проверок во время написания), потому что в конце концов это слабо типизированный язык.

Answer 4

Зависит: в общем, нет; на практике ... может быть.

Проверка типа (обычно) не происходит в производственной сборке. Если у вас есть динамически сконструированные свойства, в которых тип может быть недопустимым, вам все равно потребуется некоторая форма обработки ошибок.