React组件的三大特性 Props

复习三点运算符：
常用的就是
?? 展开数组 合并数组
?? 不能单独展开对象 但是可以合并对象{...person,name:'jack',address:"地球"}
?? 在函数中使用进行单独的传值

props的基本使用：

这是组件的基本使用方式，在渲染组件的时候，通过标签属性传值的方式传值，

//创建组件
        class Person extends React.Component{
            render(){
                // console.log(this);
                const {name,age,sex} = this.props
                return (
                    

                        
姓名：{name}
                        
性别：{sex}
                        
年龄：{age+1}
                    
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(,document.getElementById('test1'))
        ReactDOM.render(,document.getElementById('test2'))
        const p = {name:'老刘',age:18,sex:'女'}
        // console.log('@',...p);
        // ReactDOM.render(,document.getElementById('test3'))
        ReactDOM.render(,document.getElementById('test3'))

限制props的类型 默认值

如果出现与传值不符 控制台会弹出警告
使用 propTypes 进行限制
使用 defaultProps 设置默认值

        //创建组件
        class Person extends React.Component{
            render(){
                // console.log(this);
                const {name,age,sex} = this.props
                //props是只读的
                //this.props.name = 'jack' //此行代码会报错，因为props是只读的
                return (
                    

                        
姓名：{name}
                        
性别：{sex}
                        
年龄：{age+1}
                    
                )
            }
        }
        //对标签属性进行类型、必要性的限制
        Person.propTypes = {
            name:PropTypes.string.isRequired, //限制name必传，且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数值
            speak:PropTypes.func,//限制speak为函数
        }
        //指定默认标签属性值
        Person.defaultProps = {
            sex:'男',//sex默认值为男
            age:18 //age默认值为18
        }
        //渲染组件到页面
        ReactDOM.render(,document.getElementById('test1'))
        ReactDOM.render(,document.getElementById('test2'))
        const p = {name:'老刘',age:18,sex:'女'}
        // console.log('@',...p);
        // ReactDOM.render(,document.getElementById('test3'))
        ReactDOM.render(,document.getElementById('test3'))
        function speak(){
            console.log('我说话了');
        }

简写方式 在构造器中是否使用this指向props

        //创建组件
        class Person extends React.Component{
            constructor(props){
                //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
                // console.log(props);
                super(props)
                console.log('constructor',this.props);
            }
            //对标签属性进行类型、必要性的限制
            static propTypes = {
                name:PropTypes.string.isRequired, //限制name必传，且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age为数值
            }
            //指定默认标签属性值
            static defaultProps = {
                sex:'男',//sex默认值为男
                age:18 //age默认值为18
            }
            
            render(){
                // console.log(this);
                const {name,age,sex} = this.props
                //props是只读的
                //this.props.name = 'jack' //此行代码会报错，因为props是只读的
                return (
                    

                        
姓名：{name}
                        
性别：{sex}
                        
年龄：{age+1}
                    
                )
            }
        }
        //渲染组件到页面
        ReactDOM.render(,document.getElementById('test1'))

函数式组件使用 props （ 因为function 没有this 可是实例化的内容 所有不能使用 state 和 rerfs 这两个属性 但是作为声明组件而言 是可以接收props）

   //创建组件
        function Person (props){
            const {name,age,sex} = props
            return (
                    

                        
姓名：{name}
                        
性别：{sex}
                        
年龄：{age}
                    
                )
        }
        Person.propTypes = {
            name:PropTypes.string.isRequired, //限制name必传，且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数值
        }
        //指定默认标签属性值
        Person.defaultProps = {
            sex:'男',//sex默认值为男
            age:18 //age默认值为18
        }
        //渲染组件到页面
        ReactDOM.render(,document.getElementById('test1'))