React组件
目标
能够使用函数创建组件
能够使用class创建组件
能够给React元素绑定事件
能够使用state和setState()
能够处理事件中的this指向问题
React组件介绍
组件是React的一等公民，使用React就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合
组件的创建方式
函数创建组件
函数组件：使用JS的函数创建组件
**约定1：**函数名称必须以大写字母开头
**约定2：**函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容
示例demo
编写函数组件
functionHello() { return ( <div>这是第一个函数组件</div> ) }
利用ReactDOM.render()进行渲染
ReactDOM.render(<Hello/>,document.getElementById('root'))
类组件（★★★）
使用ES6语法的class创建的组件
约定1：类名称也必须要大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render方法中必须要有return返回值
示例demo
创建class类，继承React.Component，在里面提供render方法，在return里面返回内容
classHelloextendsReact.Component{ render(){ return ( <div>这是第一个类组件</div> ) } }
通过ReactDOM进行渲染
ReactDOM.render(<Hello/>,document.getElementById('root'))
抽离成单独的JS文件（★★★）
思考：项目中组件多了之后，该如何组织这些组件？
选择一：将所有的组件放在同一个JS文件中
选择二：将每个组件放到单独的JS文件中
组件作为一个独立的个体，一般都会放到一个单独的JS文件中
示例demo
创建Hello.js
在Hello.js 中导入React，创建组件，在Hello.js中导出
import React from 'react'
exportdefaultclassextendsReact.Component { render(){ return ( <div>单独抽离出来的Hello</div> ) } }
在index.js中导入Hello组件，渲染到页面
importHellofrom'./js/Hello'ReactDOM.render(<Hello/>,document.getElementById('root'))
React事件处理（★★★）
事件绑定
React事件绑定语法与DOM事件语法相似
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
注意：React事件采用驼峰命名法
示例demo
exportdefaultclassextendsReact.Component { clickHandle(e){ console.log('点了') } render(){ return ( <div><buttononClick= {this.clickHandle}>点我点我点我</button></div> ) } }
小结
在React中绑定事件与原生很类似
需要注意点在于，在React绑定事件需要遵循驼峰命名法
类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this
事件对象
可以通过事件处理函数的参数获取到事件对象
React中的事件对象叫做：合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取
示例demo
exportdefaultclassextendsReact.Component { clickHandle(e){ // 获取原生事件对象console.log(e.nativeEvent) } render(){ return ( <div><buttononClick= {this.clickHandle}>点我点我点我</button></div> ) } }
支持的事件（有兴趣的课下去研究）
Clipboard Events 剪切板事件
事件名 ：onCopy onCut onPaste
属性 ：DOMDataTransfer clipboardData
compositionEvent 复合事件
事件名： onCompositionEnd onCompositionStart onCompositionUpdate
属性： string data
Keyboard Events 键盘事件
事件名：onKeyDown onKeyPress onKeyUp
属性： 例如 number keyCode 太多就不一一列举
Focus Events 焦点事件 （这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素）
事件名： onFocus onBlur
属性： DOMEventTarget relatedTarget
Form Events 表单事件
事件名： onChange onInput onInvalid onSubmit
Mouse Events 鼠标事件
事件名：
onClickonContextMenuonDoubleClickonDragonDragEndonDragEnteronDragExitonDragLeaveonDragOveronDragStartonDroponMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUp
Pointer Events 指针事件
事件名：
onPointerDownonPointerMoveonPointerUponPointerCancelonGotPointerCaptureonLostPointerCaptureonPointerEnteronPointerLeaveonPointerOveronPointerOut
Selection Events 选择事件
事件名：onSelect
Touch Events 触摸事件
事件名：onTouchCancel onTouchEnd onTouchMove onTouchStart
UI Events UI 事件
事件名： onScroll
Wheel Events 滚轮事件
事件名：onWheel
属性：
numberdeltaModenumberdeltaXnumberdeltaYnumberdeltaZ
Media Events 媒体事件
事件名：
onAbortonCanPlayonCanPlayThroughonDurationChangeonEmptiedonEncryptedonEndedonErroronLoadedDataonLoadedMetadataonLoadStartonPauseonPlayonPlayingonProgressonRateChangeonSeekedonSeekingonStalledonSuspendonTimeUpdateonVolumeChangeonWaiting
Image Events 图像事件
事件名：onLoad onError
Animation Events 动画事件
事件名：onAnimationStart onAnimationEnd onAnimationIteration
Transition Events 过渡事件
事件名：onTransitionEnd
Other Events 其他事件
事件名： onToggle
