propTypes 只是单纯验证参数,而且没有未捕获的异常抛出。所以不管验证成功与否,props 都会传入组件,但会提示警告。
- beginWork
function updateClassComponent(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
nextProps,
renderExpirationTime: ExpirationTime
) {
if (__DEV__) {
if (workInProgress.type !== workInProgress.elementType) {
const innerPropTypes = Component.propTypes
if (innerPropTypes) {
checkPropTypes(
innerPropTypes,
nextProps, // Resolved props
"prop",
getComponentName(Component),
getCurrentFiberStackInDev
)
}
}
}
...
}
- checkPropTypes 方法来自 prop-types 库,内部异常被捕获并序列化打印出警告
function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
if (process.env.NODE_ENV !== "production") {
for (var typeSpecName in typeSpecs) {
if (has(typeSpecs, typeSpecName)) {
var error
try {
if (typeof typeSpecs[typeSpecName] !== "function") {
var err = Error("...TypeError...")
err.name = "Invariant Violation"
throw err
}
error = typeSpecs[typeSpecName](
values,
typeSpecName,
componentName,
location,
null,
ReactPropTypesSecret
)
} catch (ex) {
error = ex
}
if (error && !(error instanceof Error)) {
printWarning(error)
}
}
}
}
}
而且为了性能,prop-types 验证只在 dev mode 进行。生产环境上将不做任何处理。