13.使用propstype进行类型检查
什么是propstype？以及为什么使用它？
这里先看一下react官方对于propstype的解释react
- 随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。
- React 内置了一些类型检查的功能,在组件的
props上进行类型检查。PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的。 - 当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。
这里使用一个简单的例子来概述propstype的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- development version -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<title>使用propstypes进行类型检查</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 基本的App组件
function App(props) {
return (
<div>
<h1>hello,react</h1>
// 我们期望Greeting组件得到一个name变量类型为一个字符串
<Greeting name={ 123 }/>
</div>
)
}
// 定义一个greeting组件
function Greeting(props){
return (
<div>
<p>你好，{ props.name }</p>
</div>
)
}
// 开启类型检查
Greeting.propTypes = {
name: PropTypes.string
};
ReactDOM.render(<App/>,document.getElementById('root'))
</script>
</body>
</html>
- 当我们期望在
App组件中传入到Greeting组件的name属性时一个字符串时，我们使用propstype对传入的值进行校验。当传入的值不符合我们的预期类型的时候，校验失败，propstype这个工具会在控制台提示一个警告，提示我们这个地方我们得到了一个非预期的类型。
Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `Greeting`, expected `string`.
in Greeting (created by App)
in App
- 这可以在开发过程中及时的进行检查
- 同样也可以使用propstype去指定默认值
// 指定 props 的默认值：
Greeting.defaultProps = {
name: 'Stranger'
};
- 更多细节请查阅react官方
14.静态类型检查
- 像
Flow和TypeScript等这些静态类型检查器，可以在运行前识别某些类型的问题。他们还可以通过增加自动补全等功能来改善开发者的工作流程。 - Flow 通过特殊的类型语法为变量，函数，以及
React组件提供注解，帮助你尽早地发现错误。 - 官方推荐在大型项目中使用
TypeScript。
