React之Props，及与state的区别

Posted 2023-04-12

参考技术A 组件内可以通过props来获得属性值，看下面的实例先来回顾 一下Props最基本的使用：

通过以上实例咱们知道通过props可以得到组件MyComponent的属性siteName的值。

咱们可以通过为组件类添加defaultProps属性来为props设置默认值。defaultProps是一个对象，只要将添加的值放到defaultProps的属性中即可，例如：

咱们可以通过在父组件当中设置State，然后通过在子组件上使用props来接收收父组件的state值。

为了保证咱们的组件被正确使用，React提供了可以对Props进行验证的功能PropTypes。PropTypes为组件类自身的属性，提供了很多验证器，来验证传入的数据是否有效。当传入的数据无效时，javascript控制台会抛出警告。
另外需要注意的是，在开发环境下，当你使用了一个无效的值作为prop时，控件台会出现警告;在生产环境下，为了性能考虑会将PropTypes忽略掉！
要想使用propTypes,首先要对prop-type.js文件进行引入。

具体使用，可看以下示例：

以上示例当中的name与age不合法时，会弹出类型不符的警告！所以在项目开发中使用PropTypes进行对props的验证还是很有好处的！
更多验证器说明如下：

现在我们来总结下,props与state的区别：

[react] react组件的state和props两者有什么区别？

[react] react组件的state和props两者有什么区别？

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题