React 组件基础、创建组件、事件绑定、事件对象、有状态组件和无状态组件、state\setState、解决事件函数绑定不到this

一、组件的创建方式

React 组件的两种创建方式

1. 使用函数创建组件
2. 使用类创建组件

1.函数创建组件

• 函数组件：使用JS的函数创建组件
• 约定1：函数名称必须以大写字母开头，React 据此区分 组件 和 普通的React 元素
• 约定2：函数组件必须有返回值，表示该组件的结构
• 如果返回值为null，表示不渲染任何内容
• 渲染函数组件：用函数名作为组件标签名
• 组件标签可以是单标签也可以是双标签
  

使用箭头函数创建组件

// 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件</div>

2.类组件

• 使用ES6语法的class创建的组件
• 约定1：类名称也必须要大写字母开头
• 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
• 约定3：类组件必须提供 render 方法
• 约定4：render方法中必须要有return返回值

类组件中state统一存储到了实例对象的state属性中，
可以通过 this.state来访问，
通过this.setState()对其进行修改，
当我们通过this.setState()修改state时，React只会修改设置了的属性

3.抽离为独立 JS 文件

项目中的组件多了之后，该如何组织这些组件呢？
组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中，且需要放到src目录下

二、React 事件处理

1. 事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法：on+事件名称=事件处理函数，比如 onClick = function(){}
• 注意：React事件采用驼峰命名法

类组件绑定事件

函数组件绑定事件

小结

• 在React中绑定事件与原生很类似
• 需要注意点在于，在React绑定事件需要遵循驼峰命名法
• 类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

2. 事件对象

• 可以通过事件处理函数的参数获取到事件对象
• React中的事件对象叫做：合成事件
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
• 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
• 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取
  

支持的事件

• 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 鼠标事件

  • 事件名：

    onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
    onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
    onMouseMove onMouseOut onMouseOver onMouseUp
    

• Pointer Events 指针事件

  • 事件名：

    onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
    onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
    

• Selection Events 选择事件

  • 事件名：onSelect

• Touch Events 触摸事件

  • 事件名：onTouchCancel onTouchEnd onTouchMove onTouchStart

• UI Events UI 事件

  • 事件名： onScroll

• Wheel Events 滚轮事件

  • 事件名：onWheel

  • 属性：

    number deltaMode
    number deltaX
    number deltaY
    number deltaZ
    

• Media Events 媒体事件

  • 事件名：

    onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
    onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
    onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
    onTimeUpdate onVolumeChange onWaiting
    

• Image Events 图像事件

  • 事件名：onLoad onError

• Animation Events 动画事件

  • 事件名：onAnimationStart onAnimationEnd onAnimationIteration

• Transition Events 过渡事件

  • 事件名：onTransitionEnd

• Other Events 其他事件

  • 事件名： onToggle

三、有状态组件和无状态组件

• 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
• 状态(state) 即数据
• 函数组件没有自己的状态，只负责数据展示
• 类组件有自己的状态，负责更新UI，让页面动起来
  

State和SetState

1.state的基本使用

• 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过this.state来获取状态
  

2. setState()修改状态

• 状态是可变的
• 语法：this.setState({要修改的数据})
• 注意：不要直接修改state中的值，这是错误的
• setState() 作用：1.修改 state 2.更新UI
• 思想：数据驱动视图
  
  

小结

• 修改state里面的值我们需要通过 this.setState() 来进行修改
• React底层会有监听，一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件

3.抽取事件处理函数

• 当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this
  

原因

• 在JSX中我们写的事件处理函数可以找到this，原因在于在JSX中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是render方法，在render方法里面的this刚好指向的是当前实例对象

解决1：事件绑定this指向 利用箭头函数

• 利用箭头函数自身不绑定this的特点
  
  

解决2：利用bind方法

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

解决3：class的实例方法

• 利用箭头函数形式的class实例方法
• 注意：该语法是实验性语法，但是，由于babel的存在可以使用
  

小结

• 推荐：使用class的实例方法，也是依赖箭头函数不绑定this的原因