React技术栈-组件的基本定义和使用

　　　　　　　　　　　　　　React技术栈-组件的基本定义和使用

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.模块与组件的理解

1>.什么是模块

　　理解:
　　　　向外提供特定功能的js程序, 一般就是一个js文件.

　　为什么:  
　　　　js代码更多更复杂.

　　作用: 
　　　　复用js, 简化js的编写, 提高js运行效率.

2>.什么是组件

　　理解: 
　　　　用来实现特定(局部)功能效果的代码集合(html/css/js)
　　为什么: 
　　　　一个界面的功能更复杂
　　作用: 
　　　　复用编码, 简化项目编码, 提高运行效率

3>.什么是模块化

　　当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4>.组件化

　　当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

二.react组件的基本定义和使用案例实战

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>react组件的基本定义和使用</title>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        /**
         *    1>.定义组件时需要注意的事项:
         *        组件名称首字母大写;
         *        虚拟DOM元素只能有一个根元素;
         *        虚拟DOM元素必须有结束标签;
         */
        
        //定义组件方式一:工厂函数组件(简单组件，即没有涉及到状态变化的组件) 
        function MyComponent() {
            return <h1>工厂函数组件(简单组件)</h1>
        }
        
        //定义组件方式二:ES6类组件(复杂组件,一旦涉及到状态变化就必须使用类组件，因为函数组件不能保存状态。函数调用完成后就得弹栈，这意味函数生命周期结束啦，但理论上来说函数的效率要高，因为使用类得进行实例化) 
        class MyComponent2 extends React.Component {
            render() {
                return <h3>ES6类组件(复杂组件)</h3>
            }
        }
        
        /**
         *    2>.渲染组件标签,render()渲染组件标签的基本流程如下:
         *        React内部会创建组件实例对象;
         *        得到包含的虚拟DOM并解析位真实DOM;
         *        插入到指定的页面元素内部;
         */
        ReactDOM.render(<MyComponent />,document.getElementById("box1"));
        ReactDOM.render(<MyComponent2 />,document.getElementById("box2"));
    </script>
</html>

2>.浏览器打开以上代码渲染结果

React技术栈-组件的基本定义和使用

React技术栈-组件的基本定义和使用

相关推荐