React学习笔记五-props

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第五篇，主要介绍react中的props。

目录

1.props的基本使用

 2.props的批量传递

2.1展开运算符的复习

2.1.1数组中的展开运算符

 2.1.2函数中的展开运算符

 2.1.3构造字面量对象时使用展开语法

2.2展开运算符与props 

3.对props进行限制

4.props的简写方式

5.类式组件中构造器和props

6.函数式组件与props

6.1函数式组件中使用props

 6.2函数式组件内限制props

7.props的总结

---

1.props的基本使用

我们先来写一个小案例，将一个人的姓名，性别和年龄分别以li的形式渲染到页面上，要渲染多个人的。

这时候我先写好类式组件，在render函数内写上const {name,age,sex} = this.props，将实例中的props解构赋值，方便我们构建虚拟dom时候渲染props内的name，age和sex。

最后在ReactDOM.render内，我们写组件名字的时候，在组件内把name，age和sex传进去。

就像是<Person name='张三' sex='男' age='18'/>的形式。如此我们组件创建的实例中的props属性内就存在了name，sex和age三个数据，在render函数生成虚拟dom时会直接拿取props内的数据。

代码如下:

<!-- 准备好容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        class Person extends React.Component {
            render(){
                console.log(this);//打印this指向的实例对象，查看props属性
                const {name,age,sex} = this.props//解构赋值
                return(//构建虚拟dom
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>    
                    </ul>
                )
            }
           
        }
        //分别渲染dom到三个容器内
        ReactDOM.render(<Person name='张三' sex='男' age='18'/>, document.getElementById('test1'))
        ReactDOM.render(<Person name='李四' sex='女' age='19'/>, document.getElementById('test2'))
        ReactDOM.render(<Person name='王五' sex='男' age='20'/>, document.getElementById('test3'))
    </script>

效果如下：

 2.props的批量传递

2.1展开运算符的复习

在学习props的批量转递的时候，我们要先复习一下展开运算符，也就是三点运算符。

2.1.1数组中的展开运算符

如下两个数组，展开运算符可以将一个数组中的每一项展开显示，也可以将两个数组拼接在一起成为一个新的数组。

代码如下：

let arr1 = [1, 3, 5, 7, 9]
let arr2 = [2, 4, 6, 8, 10]
console.log(...arr1);//展开数组
let arr3 = [...arr1, ...arr2]
console.log(arr3);//拼接数组

效果如下：