React 模块与组件

React 模块与组件

几个重要概念理解
1). 模块与组件
　　1. 模块:
　　　　理解: 向外提供特定功能的js程序, 一般就是一个js文件
　　　　为什么: js代码更多更复杂
　　　　作用: 复用js, 简化js的编写, 提高js运行效率
　　2. 组件:
　　　　理解: 用来实现特定功能效果的代码集合(html/css/js)
　　　　为什么: 一个界面的功能太复杂了
　　　　作用: 复用编码, 简化项目界面编码, 提高运行效率
2). 模块化与组件化
　　1. 模块化:
　　　　当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
　　2. 组件化:
　　　　当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

react组件化开发

基本理解和使用

　　1). 自定义的标签: 组件类(函数)/标签

　　2). 创建组件类

   //方式1: 无状态函数(简单组件, 推荐使用)
　　function MyComponent1(props) {
　　return <h1>自定义组件标题11111</h1>
　　}
　　//方式2: ES6类语法(复杂组件, 推荐使用)
　　class MyComponent3 extends React.Component {
　　　　render () {
　　　　　　return <h1>自定义组件标题33333</h1>
　　　　　　}
　　}

　　3). 渲染组件标签

ReactDOM.render(<MyComp />, cotainerEle)

　　4). ReactDOM.render()渲染组件标签的基本流程
　　React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象将虚拟DOM并解析为真实DOM插入到指定的页面元素内部

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<script type="text/babel">
    //1、定义组件
    /*方式1: 工厂函数组件(简单组件)*/
    function MyComponent(){
        return <h2>工厂函数组件(简单组件)</h2>
    }
    /*方式2:  ES6类组件(复杂组件)*/
    class MyComponent2 extends React.Component {
        render() {
            console.log(this) // MyComponent2的实例对象
            return <h2>ES6类组件(复杂组件)</h2>
        }
    }
    //2、渲染组件标签
    ReactDOM.render(<MyComponent/>,document.getElementById('test1'))
    ReactDOM.render(<MyComponent2/>,document.getElementById('test2'))
</script>
</body>
</html>