React 函数式组件和类式组件详情.docxVIP

第

React?函数式组件和类式组件详情

目录前言1.函数式组件2.类式组件

前言

React是组件化的的JS库，组件化也是React的核心思想。使用React可以构建管理自身状态的封装组件，然后对其组合以构成复杂的UI。那么什么是组件呢？组件是用来实现局部功能效果的代码和资源的集合，包括html/css/js/image等，组件的作用是简化代码、复用代码、提高运行效率。

React里主要有两种类型的组件：

函数式组件=基于函数；类式组件=基于类；

1.函数式组件

函数式组件是基于使用function定义的函数，函数式组件和普通函数最主要的区别在调用的时候，函数式组件在渲染的时候没有被人为显式调用，而是由React内部去调用。来看个例子：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1.0

titleReact函数式组件/title

/head

body

divid=demo/div

!--引入react核心库--

scripttype=text/javascriptsrc=./react.development.js/script

!--引入react-dom，用于支持react操作DOM--

scripttype=text/javascriptsrc=./react-dom.development.js/script

!--引入babel，用于将jsx转为js--

scripttype=text/javascriptsrc=./babel.min.js/script

scripttype=text/babel

//1.创建函数式组件

functionMyComponent(){

returnh2我是函数式组件/h2

//2.渲染组件到页面

ReactDOM.render(MyComponent/,document.getElementById(demo))

/script

/body

/html

我们先创建一个盒子，用id进行唯一标识：

divid=demo/div

引入react依赖库，接着在script中先创建一个函数式组件：

//1.创建函数式组件

functionMyComponent(){

returnh2我是函数式组件/h2

}

然后渲染组件到页面：

//2.渲染组件到页面

ReactDOM.render(MyComponent/,document.getElementById(demo))

来分析一下，在执行了ReactDOM.render(MyComponent/,...)之后，react做了哪些事情呢：

(1)react先解析组件标签id==demo，通过标签找到了MyComponent组件；(2)react发现组件是函数定义的，接着调用这个函数；(3)react将函数返回的虚拟DOM转换为真实DOM;(4)最后呈现在页面中；

2.类式组件

类式组件是基于使用class定义的类，需要继承自React.Component；另外，类式组件中必须实现render函数。

来看个例子：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1.0

titleReact类式组件/title

/head

body

divid=demo/div

!--引入react核心库--

scripttype=text/javascriptsrc=./react.development.js/script

!--引入rea