← 返回首页
React基础教程(九)
发表时间：2022-05-21 09:21:25
三大属性之props

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

1.props

props：属性，是一个JavaScript对象。有以下特征： - props 是调用方传递给组件的数据（类似于函数的形参），而 state 是在组件内被组件自己管理的数据（类似于在一个函数内声明的变量）。 - props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 由于 props 是传入的，并且它们不能更改，因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent，也就是说，在相同的输入下，它将始终呈现相同的输出。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
    <!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component {
    //constructor构造器可写可不写
        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 (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age + 1}</li>
                </ul>
            )
        }
    }

    //渲染组件到页面
    ReactDOM.render(<Person name="jerry" sex="女"/>, document.getElementById('app'))

</script>
</body>
</html>

2.props的children用法

this.props.children来接收内容中的组件， 效果上类似vue中的插槽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
    <!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>

    <style>

    </style>
</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    class Parent extends React.Component {
        render() {
            return (
                <Child>
                    <span>{'child node'}</span>
                </Child>
            );
        }
    }

    class Child extends React.Component {
        render() {
            return (
                <div>
                    {this.props.children}
                </div>
            );
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Parent/>, document.getElementById('app'))
</script>
</body>
</html>

3.props和state属性的区别