React:组件理解及定义

文章目录

概述

我们知道通过组件化的开发,可以划分复杂的代码,使得代码结构更加清晰,且便于代码的复用与后期的维护,那么在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,插入到指定页面元素内部

上一篇:Fiddler抓包工具使用记录


下一篇:js中 this与that