React 组件与模块,模块化与组件化的概念与基本使用

概念

模块

1、理解:向外提供特定功能的JS程序,一般就是一个js文件
2、为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂,增加其复用性
3、作用:复用js,简化js的编写,提高js运行效率


组件

1、理解:用来实现局部功能效果的代码和资源的集合,可以通俗理解为代码块(html、css、js、img)集合
2、为什么:一个界面的功能太过于复杂,且多个页面进行基本相同的功能复用
3、作用:复用编码,简化项目编码结构,提高运行效率
React中组件定义的两种方式(Vue请结合Vue文档进行定义)
1、工厂函数组件

function MyComponent() {
    return <h2>return 出来的必须是一个虚拟DOM</h2>
}

2、ES6类组件(一种复杂组件:有状态的组件)

class MyComponent2 extends React.Component {
    render () {
        return <h2>使用ES6类组件方式</h2>
    }
}

React渲染组件的标签

ReactDOM.render(<MyComponent />,document.getElementById('test'));//MyComponent内部包含了<h2>标签
模块化

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

组件化

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容