005.2 React面向组件编程-什么是组件-类组件

最新推荐文章于 2024-07-24 21:04:47 发布

猴子敲代码

最新推荐文章于 2024-07-24 21:04:47 发布

阅读量108

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/test253506088/article/details/117963552

版权

React 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

React的组件分为三个部分，其实可以理解为java的对象，props就是java的get、set

.属性props(一般用于父子组件传值)
2.状态state（当前组件自己的数据）
3.生命周期（啥时候创建，啥时候props改变，啥时候渲染结束等等）

创建一个类组件

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        //类组件的命名方式和Java类一样，并且必须继承React.Component
        class MySub extends React.Component{
            //render()方法里必须返回一个jsx
            render(){
                return (
                    <div>这是一个类组件</div>
                );
            };
        }
        //同样也是单标签、双标签都可以调用组件
        let dom = <div>
            <MySub/>
            <MySub></MySub>
        </div>;
        ReactDOM.render(dom, document.getElementById("app"));
    </script>
</body>

通过props就可以对组件进行数据传递，因此props是组件对外的接口，父组件也可以给子组件传递数据。

注意：无论是函数组件还是类组件，都无法修改自身的props。

和函数组件一样，通过属性的方式给props传值，类组件通过this.props来获取数据：

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        class MySub extends React.Component {
            render() {
                return <div>{this.props.user.name}->{this.props.user.age}岁</div>
            };
        };
        let user = {
            name: "黑白大彩电",
            age: 21
        };
        let dom = <div>
            <MySub user={user} />
        </div>;
        ReactDOM.render(dom, document.getElementById("app"));
    </script>
</body>

给props设置默认值

<body>
    <div id="app"></div>
    <!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
    <script type="text/babel">
        class MySub extends React.Component {
            //设置默认值
            static defaultProps = {
                user: {
                    name: "黑白大彩电",
                    age: 22
                }
            }
            render() {
                return <div>{this.props.user.name}->{this.props.user.age}岁</div>
            };
        };
        let dom = <div>
            <MySub />
        </div>;
        ReactDOM.render(dom, document.getElementById("app"));
    </script>
</body>