React--9: 组件的三大核心属性2:props与构造器

用户4793865

发布于 2023-01-12 14:19:57

5930

发布于 2023-01-12 14:19:57

文章被收录于专栏：前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第16天，活动详情查看:8月更文挑战

1. 添加构造器

上一篇文章的例子，更改一下，添加构造器。当然，这个构造器写不写都可以

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';

class Person extends React.Component{
    constructor(props){
        console.log(props)
        super(props)
    }
    static propTypes = {
        name :PropTypes.string.isRequired,
        sex : PropTypes.string,
        age : PropTypes.number.isRequired,
    }
    static defaultProps = {
        name : "tom",
        age:18,
        sex:"boy"
    }
    render(){
        const {name,sex,age} = this.props
    
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
    }
    
}
ReactDOM.render(<Person name="bob"  />, document.getElementById('root'))

思考几个问题

props 传给super和不传的区别

在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

构造器是否接受 props，是否传给 super ，取决于：是否希望在构造器中通过this 访问 props。

类中的构造器有什么作用呢

通常，在 React 中，构造函数仅用于以下两种情况：

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例，即对自定义函数的 bind。

类中的构造器，能省略就省略。

2. 函数式组件使用props

组件实例的三大属性，类组件才有实例（this）。

但是函数组件具有 props。

现在，函数内部接收不到实例 this 了，那怎么办呢？虽然函数接收不到 this ，但是函数可以传参数。

function Person(props){
    const {name,sex,age} = props
    console.log(props)
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
}
ReactDOM.render(<Person name="bob"  age={12} sex="girl" />, document.getElementById('root'))

可以看到我们打印出了 props

那怎么做限制呢？限制只能写在函数的外面，并且不能再用static关键字了，因为那是类中才有的关键字。使用Person.

function Person(props){
    const {name,sex,age} = props
    console.log(props)
        return(
            <ul>
                <li>
                    姓名 ：{name}
                </li>
                <li>
                    性别 ：{sex}
                </li>
                <li>
                    年龄：{age+1}
                </li>
            </ul>
        )
}
      Person.propTypes = {
            name :PropTypes.string.isRequired,
            sex : PropTypes.string,
            age : PropTypes.number.isRequired,
        }
        Person.defaultProps = {
            name : "tom",
            age:18,
            sex:"boy"
        }

总结

理解

每个组件对象都会有props属性

组件标签的所有属性都保存在props中

作用

通过标签属性从组件外向组件内传递变化的数据

组件内部不要修改数据

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-17，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

登录后参与评论

0 条评论

热度