React的模块和组件

一、模块和组件

何为模块

简单来说就是将js代码根据特定的功能拆成不同的js程序。

1、为什么要拆成模块：

随着业务逻辑增加，代码会越来越复杂。

2、作用

复用js，简化js的编写，提高js的运行效率。

何为组件:

用来实现局部功能的代码和资源（包括js,html,img...）

1、为什么要拆成组件

随着业务增加，页面功能越来越复杂。

2、作用

提高代码复用率，代码整洁，提高运行效率。

二、React中组件的定义

函数组件

通过定义一个function返回对应的虚拟DOM函数组件，交由React解析对应的函数组件，并将虚拟DOM转为真实DOM，并渲染到页面中

注意：组件名称需要大写开头，如是小写开头，React会根据当前组件名去html中寻找对应的标签，找不到则报错，如是大写开头，则会寻找对应名称的组件。

例子：

    <script type="text/babel">
        
        function MyComponent(){
            return <h2>我是函数定义的组件</h2>
        }

        //注意，创建函数式组件函数名必须大写，因调用组件是通过标签去进行调用，如用的是小写，则react默认会去找html中对应的标签，
        //没有对应的标签则报错，如函数组件为大写，则React将对应的组件渲染到页面，没有对应的组件则报错。
        ReactDOM.render(<MyComponent/>,document.getElementById("test"));
    </script>

类组件

通过定义一个类，类中重写了render方法，该方法返回对应的虚拟DOM，当React根据对应的组件名称获取对应的组件时，将会根据类创建出一个实例，并执行render方法，将render方法返回的虚拟DOM转为真实DOM，并渲染到页面中。

注意：与函数组件一样，定义类组件时类名也需要大写开头。

例子：

    <script type="text/babel">
        
        class MyComponent extends React.Component {
            render(){
                return <h2>我是类定义的组件</h2>
            }
        }

        //注意，创建函数式组件函数名必须大写，因调用组件是通过标签去进行调用，如用的是小写，则react默认会去找html中对应的标签，
        //没有对应的标签则报错，如函数组件为大写，则React将对应的组件渲染到页面，没有对应的组件则报错。
        ReactDOM.render(<MyComponent/>,document.getElementById("test"));

    </script>

三、组件中如何绑定原生事件

1、一般如我们实现点击事件有几种方式。

例如：

  
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3" onclick="demo()">按钮3</button>


    <script type="text/javascript">
        //第一种方式
        const btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",()=>{
            console.log("按钮1被点击");
        });

·       //第二种方式
        const btn2 = document.getElementById("btn2");
        btn2.onclick = ()=>{
            console.log("按钮2被点击");
        };

        //第三种方式
        function demo(){
            console.log("按钮3被点击");
        }
    </script>

此处比较推荐第三种方式，虽然一二种方式也可以绑定事件，但是会存在频繁操作原生DOM，这是我们不愿意看到的。

2、组件绑定原生事件

组件绑定原生事件需要注意的几小点

在虚拟DOM中的onclick需要改为React提供的onClick.
调用函数不能传递字符串的函数名称，应该使用{}中填写函数名。

例子：

<script type="text/babel">

        //创建类组件
        class Weather extends React.Component {
            constructor() {
                super();
                this.state = { isHot: false };
            }
            render() {
                console.log(this)
                return <h2 onClick = {demo}>今天天气真{this.state.isHot ? "凉爽" : "炎热"}</h2>
            }
        }


        ReactDOM.render(<Weather />, document.getElementById("box"));

        function demo(){
            console.log("被点击")
        }
    </script>

React学习分享03：React的模块和组件