文章目录

• • 概述
  • 自定义组件

概述

我们知道通过组件化的开发，可以划分复杂的代码，使得代码结构更加清晰，且便于代码的复用与后期的维护，那么在react中是怎么声明组件并调用的呢。

自定义组件

在react中，定义组件的方式有两种，分别是
1.工厂函数组件（简单组件）
2.ES6类组件（复杂组件 ）

1.工厂函数组件（简单组件）
适用于简单组件，也就是不需要state管理的组件
工厂函数组件是通过函数声明来构造并return返回jsx代码，如下

<script type="text/babel">
    // 创建函数组件
    function MyComponent(){
        console.log(this);//bebel转换后开启严格模式，此时this不能默认绑定，即不能指向window
        return (
            <div id="title">
                <span>Hello World</span>
            </div>
        )
    }
    ReactDOM.render(<MyComponent/>,document.getElementById("root"))
</script>

注意:
1.组件名需要大写字母开头，这样才会识别为组件进行查找
2.由于babel的转换，会将function内部添加严格模式，所以内部的this其实不是默认绑定，输出为undefined。

解析流程
1.遇到组件标签进行查找组件
2.发现组件是由函数声明，则调用函数，获得jsx构造的虚拟DOM并渲染成真实UI,插入到指定页面元素内部

2.ES6类组件(复杂组件)
适用于复杂组件，也就是对应需要state管理的组件
ES6组件是通过ES6中的类来进行构造的，用法如下

<script type="text/babel">
    // 创建函数组件
    class MyComponent extends React.Component{
        render(){
            return(
                <div>Hello World</div>
            )
        }
    }
    ReactDOM.render(<MyComponent/>,document.getElementById("root"))
</script>

注意：
1.组件名需要大写字母开头，这样才会识别为组件进行查找
2.需要继承React内的Component类
3.render方法为MyComponent创建的实例自动调用

解析流程
1.遇到组件标签进行查找组件
2.发现组件是由ES6类声明，创建类的实例对象
3.调用实例对象的render方法获得jsx构造的虚拟DOM并渲染成真实UI，插入到指定页面元素内部