极智开发 | 讲解 React 组件三大属性之二：props

Posted 极智视界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了极智开发 | 讲解 React 组件三大属性之二：props相关的知识，希望对你有一定的参考价值。

  欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

  大家好，我是极智视界，本文讲解一下 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。希望我的分享能对你的学习有一点帮助。


 【公众号传送】

《极智开发 | 讲解 React 组件三大属性之二：props》


扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！

以上是关于极智开发 | 讲解 React 组件三大属性之二：props的主要内容，如果未能解决你的问题，请参考以下文章

极智开发 | 讲解 React 组件三大属性之一：state

极智开发 | 讲解 Nginx 特性之二：负载均衡

极智开发 | React 函数式组件 和 类式组件

极智开发 | 讲解 Nginx 特性之一：反向代理

极智开发 | 讲解 Nginx 特性之三：动静分离

React Native之生命周期