React三大属性之props

利用外部的数据，进行数据的渲染，相当于想组件传递数据

1、props的基本使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react></title>
</head>
<body>

    <div id="test"></div>
    
    <script type="text/javascript" scr="./react.develoment.js"></script>
    <script type="text/javascript" scr="./react-dom.development.js"></script>
    <script type="text/javascript" scr="./babel.min.js"></script>
    <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {
        
        render(){
           return (
                <ul>
                    <li>姓名: { this.props.name }</li>
                    <li>年龄: { this.props.age }</li>
                    <li>性别: { this.props.sex }</li>
                </ul>
            )
        }
        
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry" age="18" sex="男"/>,document.getElementById('test'))
    </script>
</body>
</html>

<Person name="jerry" age="18" sex="男"/> 这样写，React就可以把name="jerry" age="18" sex="男"这些属性放到组件实例里

这样就可以在代码里使用this.props.name......，进行使用

也可以进行简化

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello_react></title>
</head>
<body>

    <div id="test"></div>
    
    <script type="text/javascript" scr="./react.develoment.js"></script>
    <script type="text/javascript" scr="./react-dom.development.js"></script>
    <script type="text/javascript" scr="./babel.min.js"></script>
    <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {
        
        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }
        
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry" age="18" sex="男"/>,document.getElementById('test'))
    </script>
</body>
</html>

2、批量传递props

单个单个传递属性props，未免繁琐，能否批量传递呢？

javascript 复制代码

    <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {
        
        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }
        
    }
    const p = { name:"jerry",age:"18",sex:"男" }
    //渲染组件到页面
    ReactDOM.render(<Person { ...p }/>,document.getElementById('test'))
    </script>

解释

对象不是不能进行展开运算的吗？为什么ReactDOM.render(<Person { ...p }/>,document.getElementById('test'))这个就可以

表面上看对象确实不能直接用展开运算符（比如 console.log(...{a:1,b:2}) 会报错），但在 React 的 JSX 语法中 <Person { ...p }/> 能生效，核心原因是JSX 里的展开运算符是 React 对 ES6 语法的特殊适配，并不是直接对普通对象做展开。

在 <Person { ...p }/> 里，{ ...p } 并不是对对象做 "普通展开"，而是 React 编译器（Babel）将其解析为 **"把对象的键值对逐个作为组件的 props 属性"**。

简单说：JSX 里的 { ...对象 } 是 React 提供的语法糖，目的是简化 "把对象的所有键值对作为组件 props" 的操作，和普通 JS 里直接展开对象完全是两回事。

3、对props进行限制

当我们执行

javascript 复制代码

ReactDOM.render(<Person name="jerry" age="18" sex="男"/>,document.getElementById('test'))

name、age和sex都是字符串类型的，如果我要在页面上展示age+1的话，势必会脱离我们的预期。需要一种对组件的传值进行限制，如果类型错误的话，会有警告提示；如果没有传值的话，会有默认的值进行填充

javascript 复制代码

  <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {
        
        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age+1 }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }
        
    }
    const p = { name:"jerry",age:"18",sex:"男" }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry",age="18",sex="男"/>,document.getElementById('test'))
    //以上的age是字符串

    ReactDOM.render(<Person name="jerry",age={18},sex="男"/>,document.getElementById('test'))
   //以上的age为number
   //这种效果暂时解决了我们传递的age为number类型，可以进行age+1的操作，但是治标不治本
    </script>

我们需要引入prop-types.js文件，对props的类型实现开头我们的初衷。

javascript 复制代码

 <script src="./prop-types.js"></script>  
 <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {
        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }
        
    }

    //对标签属性进行类型、必要性的限制
    Person.propType = {
        name:PropTypes.string.isRequired, //限制name必传，且为字符串
        age:PropTypes.number, //限制age为数字
        speak:PropTypes.func //限制speak为函数
    }

    //指定默认标签属性值
    Person.defaultProps = {
        sex:"男",//sex的默认值为男
    }
    //渲染组件到页面
    ReactDOM.render(<Person name="jerry",age="18",sex="男"/>,document.getElementById('test'))
    function speak(){
        
    }
    </script>

由于我们引入了prop-types.js，那么页面全局就会有一个PropTypes。类Person的propType，是Person自带的。注意类型的限制，我们用的是小写，function的类型写的是func。

4、props的简写

javascript 复制代码

 <script src="./prop-types.js"></script>  
 <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {

         //对标签属性进行类型、必要性的限制
         static propType = {
            name:PropTypes.string.isRequired, //限制name必传，且为字符串
            age:PropTypes.number, //限制age为数字
            speak:PropTypes.func //限制speak为函数
         }

        //指定默认标签属性值
        static defaultProps = {
            sex:"男",//sex的默认值为男
        }

        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }

        state = {  } 
        
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="jerry",age="18",sex="男"/>,document.getElementById('test'))
    function speak(){
        
    }
    </script>

构造器constructor

javascript 复制代码

 <script src="./prop-types.js"></script>  
 <script type="text/babel">

    //创建类式组件
    class Person extends React.Component {

        constructor(props){
            super(props)
            console.log(this.props)
        }

        render(){
           const { name,age,sex } = this.props
           return (
                <ul>
                    <li>姓名: { name }</li>
                    <li>年龄: { age }</li>
                    <li>性别: { sex }</li>
                </ul>
            )
        }

        state = {  } 
        
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="jerry",age="18",sex="男"/>,document.getElementById('test'))
    </script>

我们写代码时，有没有注意到我们都没有写构造器constructor，其实这个构造器可要也可以不要，

构造器是否接受props，是否传递super取决于是否希望在构造器中通过this访问props，实际情况很少用到

5、函数式组件使用props

javascript 复制代码

 <script src="./prop-types.js"></script>  
 <script type="text/babel">

    //创建组件
    function Person(props){
        const { name, age, sex } = props
        return(
             <ul>
                  <li>姓名: { name }</li>
                  <li>年龄: { age }</li>
                  <li>性别: { sex }</li>
             </ul>
        )
    }

    //对标签属性进行类型、必要性的限制
    Person.propType = {
        name:PropTypes.string.isRequired, //限制name必传，且为字符串
        age:PropTypes.number, //限制age为数字
        speak:PropTypes.func //限制speak为函数
    }

    //指定默认标签属性值
    Person.defaultProps = {
        sex:"男",//sex的默认值为男
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="jerry",age="18",sex="男"/>,document.getElementById('test'))
    </script>

函数式组件也就只能使用一下props，没有其他的简写形式，而且也不能使用state