1.React 组件介绍
组件是 React的一等公民，使用React就是在用组件组件表示页面中的部分功能
组合多个组件实现完整的页面功能特点:可复用、独立、可组合
2. React 组件的两种创建方式
2.1使用函数创建组件
使用JS中的函数创建的组件叫做∶函数组件

• 函数组件必须有返回值
• 组件名称必须以大写字母开头，
• React据此区分组件和普通的React元素使用函数名作为组件标签名

2.2使用类创建组件

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

class Hello extends React.component {
render () {
return <div>Hello class Cormponent!</div>}
}
ReactDOM. render (<Hello / >, root)

2.3抽离为独立JS文件

• 1．创建Hello.js
• 2在Hello.js 中导入React
• 3．创建组件（函数或类)
• 4．在Hello.js中导出该组件
• 5．在index.js 中导入Hello组件6．渲染组件

3.React 事件处理
3.1事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法:on+事件名称={事件处理程序}，比如: onClick={0 =>#}注意:React事件采用驼峰命名法，比如: onm ouseEnter、onFocus
• 在函数组件中绑定事件∶

3.2事件对象

• 可以通过事件处理程序的参数获取到事件对
• 象React中的事件对象叫做:合成事件（对象)
• 合成事件︰兼容所有浏览器，无需担心跨浏览器兼容性问题

function handleclick(e){
e.preventDefault ()
console.log('事件对象'，e)
<a onclick={ handleclick}>点我，不会跳转页面</ a>

事件程序抽离

•     推荐把逻辑抽离到单独的方法中
•     因为JSX主要以展示UI为主
•     这点与VUE的模板一致

4.有状态组件和无状态组件
函数组件又叫做无状态组件，类组件又叫做有状态组件
状态( state )即数据
函数组件没有自己的状态，只负责数据展示（静)
类组件有自己的状态，负责更新Ul，让页面“动”起来
比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。
5.组件中的state和setState
5.1 state的基本使用

• 状态即数据
• 状态是私有的，只能在组件内部使用通过
• this.state来获取状态

class Hello extends React.cormponent {//简化语法
state= {count : o}
render () {
return (
<div>有状态组件，{this.state.count}<l div>)
}}

5.2 setState()修改状态

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

l/正确
this.setstate({
count: this.state.count + 1})
/错误
this.state.count +=1

state（类组件）

•     状态即数据，是一个组件内部私有数据，只能在该组件内部使用
•     state的值是对象，对象内部可以存放多个数据(包括JSX）
•     它与小程序的state和vue的data类似
•     setState()
  •         状态是可以被改变的
  •         但是不允许直接改变state的值
  •         该函数有2个作用：修改状态、更新视图
  •         与小程序的语法类似

6.事件绑定解决this 指向问题
1．箭头函数

• 利用箭头函数自身不绑定this的特点
•  render（)方法中的this为组件实例，可以获取到setState

• class Hello extends React.component {
  onIncrement() {
  this.setstate( { ... })
  render () {
  //箭头函数中的this指向外部环境，此处为: render()方法return (
  <button onclick={() =>this.onIncrement () }></button>)
  }}
  

2. Function.prototype.bind()
利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

class Hello extends React.component {
constructor() {
super ()
this.onIncrement = this.onIncrement.bind(this)
心
}
/l ...省略onIncrementrender () {
return (
<button onclick={this. onIncrement} ></ button>)
}}

3. class的实例方法
利用箭头函数形式的class实例方法
注意:该语法是实验性语法，但是，由于babel的存在可以直接使用
1.推荐:使用class的实例方法
class Hello extends React.component {
onIncrement = ()-=>{
this .setstate( { ... })}
}