React 面向组件编程

最新推荐文章于 2022-06-08 13:59:19 发布

MW0309

最新推荐文章于 2022-06-08 13:59:19 发布

阅读量253

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_42222342/article/details/105096520

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件到底是什么？

高耦合低内聚
高耦合就是吧逻辑紧密的内容放在一个组件当中低内聚吧不同组件的依赖关系尽量弱化每个组件眼尽可能的独立起来

组件当中的重要内容

1.构建方式
2.组件的属性
3.生命周期

演变过程传统的组件有几个明显的特点：

1、简单的封装
2、简单的生命周期的呈现
3、明显的数据流动当一个项目比较

复杂的时候传统的组件化根本不能很好的把结构样式和行为结合让项目很难以维护

react的组件分为3个部分

1属性props
2状态state
3生命周期
react的组件是一个非常重要的概念通过组件可以吧页面中的ui部分切分成独立高复用性的部件让每个开发者更加专注于一个个独立的部件

组件与组件化

组件就是用实现页面局部功能的代码集合简化页面的复杂程度提高运行效率组件化当前程序都是使用组件完成的那么就是一个组件话的应用

组件的创建

1.函数组件/无状态组件
2.类组件

无状态组件实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无状态组件</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="demoReact">

    </div>
    <script type="text/babel">
        //无状态组件的创建方式
        function MyCom(){
            return(
                <div>我是一个没有状态组件</div>
            )
        }
        let com=<div>
            <MyCom/>
            <MyCom></MyCom>
        </div>
        ReactDOM.render(com,document.getElementById("demoReact"));
    </script>
</body>
</html>

效果图

在这里插入图片描述

父子组件实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="demoReact">

    </div>
    <script type="text/babel">
        //父子组件
        function MyComA(){
            return(
                <div>我是A组件</div>
            )
        }
        function MyComB(){
            return(
                <div>我是B组件</div>
            )
        }
        function MyComC(){
            return(
                <div>我是C组件</div>
            )
        }
        function MyComD(){
            return(
                <div>我是D组件</div>
            )
        }
        //父组件调用
        function Com(){
            return(
                <div>
                    <MyComA></MyComA>
                    <MyComB></MyComB>
                    <MyComC></MyComC>
                    <MyComD></MyComD>
                </div>
            )
        }
        ReactDOM.render(<Com/>,document.getElementById("demoReact"));
    </script>
</body>
</html>

效果图

在这里插入图片描述

类组件实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类组件</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="demoReact">

    </div>
    <script type="text/babel">
        //创建类组件 组件名首字母大写
         class MyCom extends React.Component{
             render(){
                 return(
                     <div>类组件</div>
                 )
             }
         }
        let com=<div>
            <MyCom/>
            <MyCom></MyCom>
        </div>
        ReactDOM.render(com,document.getElementById("demoReact"));
    </script>

</body>
</html>

效果图

在这里插入图片描述

MW0309

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
React 面向组件编程

组件到底是什么？高耦合低内聚高耦合就是吧逻辑紧密的内容放在一个组件当中低内聚吧不同组件的依赖关系尽量弱化每个组件眼尽可能的独立起来组件当中的重要内容1.构建方式2.组件的属性3.生命周期演变过程      传统的组件有几个明显的特点：1、简单的封装2、简单的生命周期的呈现3、明显的数据流动当一个项目比较复杂的时候&n...
复制链接

扫一扫