1.React组件介绍

组件时React的一等公民，使用React就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

2.React组件的两种创建方式

2.1 使用函数创建组件

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

function Hello() {
   return (
      <div>这是我的第一个函数组件！</div>
   )
}
ReactDOM.render(<Hello />,root)

const Hello = () => <div>这是我的第一个函数组件！</div>
ReactDOM.render(<Hello />,root)

2.2 使用类创建组件

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

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

2.3 抽离为独立JS文件

创建Hello.js
在Hello.js中导入React
创建组件（函数或类）
在Hello.js中导出该组件
在index.js中导入Hello组件
渲染组件

3.React事件处理

3.1 事件绑定

React事件绑定语法与DOM事件语法相似
语法：on+事件名称={事件处理程序}，比如：onClick={() => {}}
注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus

class App extends React.Component {
  handleClick() {
    console.log('单机事件触发了')
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
      )
    }
  }

在函数组件中绑定事件：

function App() {
  function handleClick() {
    console.log('单击事件触发了')
  }
  return (
    <button onClick={handleClick}>点我</button>
    )
}

3.2 事件对象

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

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

4.有状态组件和无状态组件

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

5.组件中的state和setState

5.1 state的基本使用

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

class Hello extends React.Component {
   constructor() {
      super()
      //初始化state
      this.state = {
         count:0
      }
   }
   render() {
      return (
         <div>有状态组件,{this.state.count}</div>
      )
   }
}
ReactDOM.render(<Hello />,root)

class Hello extends React.Component {
   //简化语法
   state = {
      count: 0
   }
   render() {
      return (
         <div>有状态组件,{this.state.count}</div>
      )
   }
}
ReactDOM.render(<Hello />,root)

5.2 steState()修改状态

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

class App extends React.Component {
  state = {
    count: 0,
    test: 'a'
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

6.事件绑定this指向

1.箭头函数

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

class App extends React.Component {
  state = {
    count: 0,
    test: 'a'
  }
  onIncrement() {
    this.setState({
            count: this.state.count + 1
          })
  }
  render() {
    //箭头函数中的this指向外部环境，此处为：render()方法
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={() => this.onIncrement()}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

2.Function.prototype.bind()

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

class Hello extends React.Component {
   constructor() {
      super()
      this.state = {
      count: 0
      }
      this.onIncrement = this.onIncrement.bind(this)
   }
   onIncrement() {
    this.setState({
            count: this.state.count + 1
          })
  }
   render() {
      return (
         <button onClick={this.onIncrement}></button>
      )
   }
}
ReactDOM.render(<Hello />,root)

3.class的实例方法

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

class Hello extends React.Component {
   onIncrement = () => {
     this.setState({...})
   }
   render() {
      return (
         <button onClick={this.onIncrement}></button>
      )
   }
}
ReactDOM.render(<Hello />,root)

7.表单处理

7.1 受控组件

HTML中的表单元素是可输入的，也就是有自己的可变状态
而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改
React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
受控组件：其值受到React控制的表单元素

<input type="text" value={this.state.txt} />

使用步骤：

在state中添加一个状态，作为表单元素的value值（控制表单元素的来源）
给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）

state = {txt: ''}

<input type="text" value={this.state.txt}
  onChange={e => this.steState({txt: e.target.value})}
/>

多表单元素优化：
问题：每个表单元素都有一个单独的事件处理程序太繁琐
优化：使用一个事件处理程序同时处理多个表单元素
多表单元素优化步骤：

给表单元素添加name属性，名称与state相同
根据表单元素类型获取对应值
在change事件处理程序中通过[name]来修改对应的state

<input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />

//根据表单元素类型获取值
const value = target.type ==='checkbox'
     ? target.checked
     : target.value
     
//根据name设置对应state
this.setstate({
   [name]: value
})

7.2 非受控组件

说明：借助于ref，使用原生DOM方式来获取表单元素值
ref的作用：获取DOM或组件
使用步骤：

调用React.createRef()方法创建一个ref对象

constructor() {
  super()
  this.txtRef = React.createRef()
}

将创建好的ref对象添加到文本框中

<input type = "text" ref={this.txtRef} />

通过ref对象获取到文本框的值

Console.log(this.txtRef.current.value)