携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 7 天，点击查看活动详情
欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享
大家好，我是极智视界，本文讲解一下 React 组件三大属性之二：props。
React 组件，从概念上类似于 JavaScript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：state、props、refs。这里讲解三大属性之二：props，要学习 state 的同学可以移步我的这篇《极智开发 | 讲解 React 组件三大属性之一：state》 。
1. props 理解
上一篇咱们已经讲了 state，我们知道 state 主要用来控制 组件状态。props 相对于 state 主要有几点区别：
state是可读可写的，可与用户进行交互修改，而props是只读的；state主要用于控制 组件自身，而props可以用于组件本身的信息传递，也适用于 组件间 的数据传递，特别是 父子组件 间的信息传递；
我们在设计一个组件的时候，肯定希望这个组件能够复用，所以在设计的时候 往往不希望把组件的传参 写死， 而是可以动态的把 组件里需要的 数据传递进去，以提高组件的 灵活性，这个时候就需要用到咱们的 props。
React 文档中，对 props 这么进行解释：
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 "props"。
可以看出，props 最重要的作用还是子组件间的信息传递。
下面让我们来看几个示例。
2. props 示例
来看一个 props 的基本使用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React组件属性之二：props基本使用</title>
</head>
<body>
<div id="demo0"></div>
<div id="demo1"></div>
<div id="demo2"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./babel.min.js"></script>
<script type="text/babel">
// 1. 创建组件
class Person extends React.Component{
render(){
const {name, age, sex, height} = this.props
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
<li>身高：{height}</li>
</ul>
)
}
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="八戒" age={300} sex="男" height={200}/>, document.getElementById('demo0'))
ReactDOM.render(<Person name="悟空" age={500} sex="男" height={220}/>, document.getElementById('demo1'))
// 使用展开运算符进行传参的方式
const p = {name:'蜘蛛精', age:19, sex:'女', height:180}
ReactDOM.render(<Person {...p}/>, document.getElementById('demo2'))
</script>
</body>
</html>
以上通过 props 将 外部的 Person 属性 =>name、sex、age、height 进行动态传递，在调用组件 render 进行渲染的时候灵活度就会高很多。props 除了能够往组件里面传参，还能够限制传参的类型，这能提高软件的自身核验能力。来看是什么做的呢，还是基于上面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script type="text/babel">
// 1. 创建组件
...
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name:PropTypes.string.isRequired, // 限制name必传，且为字符串
sex:PropTypes.string, // 限制sex为字符串
age:PropTypes.number, // 限制age为数值
height:PropTypes.number, // 限制height为数值
}
// 2. 渲染组件到页面
...
</script>
</body>
</html>
对传参做了以上限制后，如果在渲染的时候传参类型不符合，就会抛出错误提示，这样可以很好的做到 都按我说的来 。 同样，我们也可以对上述的例子进行一个简写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React组件属性之二：props简写</title>
</head>
<body>
<div id="demo"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="./react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="./react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="./babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="./prop-types.js"></script>
<script type="text/babel">
// 1. 创建组件
class Person extends React.Component{
// 构造函数
constructor(props){
super(props)
}
// 对标签属性进行类型、必要性的限制
static propTypes = {
name:PropTypes.string.isRequired, // 限制name必传，且为字符串
sex:PropTypes.string, // 限制sex为字符串
age:PropTypes.number, // 限制age为数值
height:PropTypes.number, // 限制height为数组
}
render(){
const {name, age, sex, height} = this.props
//this.props.name = 'jack' // 此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
<li>身高：{height}</li>
</ul>
)
}
}
// 2. 渲染组件到页面
ReactDOM.render(<Person name="悟空" age={500} sex="男" height={220}/>, document.getElementById('demo'))
</script>
</body>
</html>
以上把控制传参的逻辑放到了 组件构建 里面，这样一来，逻辑就更加清晰了，总的来说只有两步：(1) 创建组件；(2) 渲染组件到页面。
说了这么多，是不是觉得还没说到 props 在 父子组件中信息传递 的方式，其实不然，来看 Person 组件的构造：
class Person extends React.Component{...}
可以看到 Person 类其实是继承了 React.Component ，可能由于 React.Component 里面是什么，不是那么直观，所以导致 props子组件信息传方式，看起来也不够直观, 其实这里 this.props 就是 props 父传子 的方式。没事，咱们继续举例子。 下面是一个 子传父 的例子：
// 1. 创建父组件
class Parent extends React.Component {
getName = (name) => {
// 输出接收到子组件的参数
console.log(name)
}
render() {
// 以函数的方式定义传值
return (
<div>
<Children getName={this.getName}/>
</div>
)
}
}
// 2. 创建子组件
class Children extends React.Component {
render() {
// 通过父组件的方法进行传值
this.props.getName('爸爸')
return (
<div></div>
)
}
}
// 3. 渲染组件到页面
ReactDOM.render(<Parent/>, document.getElementById('root'))
以上调用了 Parent 组件渲染到页面，控制台会输出 爸爸，也就是父组件在 render 函数中可以直接获取到 子组件 传递过来的参数，并进行展示。其实仔细分析一下，上面的组件 Parent、Children 之间的信息传递 也可以认为是兄弟组件之间的信息传递，因为它们同样继承于 React.Component ，而且 爸爸和孩子 往往也是好兄弟啊。
好了，以上分享了 讲解 React 组件三大属性之二：props。希望我的分享能对你的学习
有一点帮助。
【公众号传送】
