【one】React之创建组件的方式、事件处理、state和setState、this指针指向

创建组件的两种方式

1. 函数组件

1. 1什么是函数组件？

使用Js函数（或箭头函数）创建的组件

1.2 函数组件的约定

函数名必须以大写开头
函数组件必须有返回值
如果返回值null，表示不渲染任何内容

import React from 'react';
import ReactDOM from 'react-dom';
/**
 * 1.创建函数组件
 */
function Hello(){
  return(
    <div>Hello</div>
  )
}
//2.使用箭头函数创建
const Hello =()=> <div> Hello</div>

//渲染组件时 直接使用函数名
ReactDOM.render(<Hello></Hello>,document.getElementById('root'))

2. 类组件

2.1 什么时类组件？

使用ES6的class创建的组件

2.2 约定

类名也必须以大写字母开头
类组件必须继承React.Componet父类。
类自建必须提供render（）方法
render()方法必须有返回值，表示该组件的结构
如果返回值null，表示不渲染任何内容 (同函数组件)

/**
 * 创建类组件
 */
class Hello extends React.Component{
  render(){
    return(
      <div>Hello类组件</div>
    )
  }
}
//渲染组件
ReactDOM.render(<Hello></Hello>,document.getElementById('root'))

3. 事件处理

3.1 语法

on+时间名称={事件处理程序}，比如:点击时间onClick={()=>{} }。React采用的时驼峰命名法。

3.2 分别使用函数组件、类组件进行时间处理的示例

/**
 * 类组件事件处理
 */
class My extends React.Component{
  click(){
    console.log("点击了")
  }
  render(){
    return(
    <button onClick={this.click}>点击</button>)
  }
}
/**
 * 函数组件事件处理
 */
function My() {
  function click() {
    console.log("点击了")
  }
  return (<button onClick={this.click}>点击</button>)

}

//渲染组件
ReactDOM.render(<My></My>,document.getElementById('root'))

4.state和setState的使用

使用这两个之前先介绍一下有状态组件和无状态组件

• 有状态组件就是指类组件
  类组件有自己的状态，负责更新UI，让页面动起来。
• 无状态组件就是指函数组件
  函数组件没有自己的状态，只负责展示数据。

4. 1state状态的使用

state是组件内部的私有数据，只能在组件内部使用。它的值是一个对象，表示一个组件中可以有多个数据。

class My extends React.Component {
// 1.初始化state
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }
  //2.简化语法初始化state
  state = {
    count: 0
  }
 
  render() {
    return (
           null
  }
}

通过this.state.count可以拿到state中的count的数据

4.2 setState修改状态

状态是可变的，可以通过this.setState修改。

//这样修改
this.setState({
count:this.state.count+1
})

不能直接修改state中的值。

//错误
this.state.count+=1

5. this指向问题

实际应用中可能会在JSX中参杂过多的JS逻辑代码，显得非常混乱。
因此需要将逻辑抽离到单独的方法中

5.1出现原因

下面是一个计数器的简单实现。将逻辑抽离到单独的方法click中了

class My extends React.Component {
  //2.简化语法初始化state
  state = {
    count: 0
  }
  click() {
    console.log("点击了")
    this.setState({
      count:this.state.count+1
    })
  }
  render() {
    return (
      <div>
        <h1>计数器{this.state.count}</h1>
        <button onClick={this.click}>点击</button>
      </div>)
  }
}

运行后会报错
看到报错信息。定位到 this.setState这句报错

可以打印出this的值。可以看到this未定义。
原因就是 调用click时的this 不能指向setState。因为this属于当前对象。

5.2解决

• 使用class的实例方法。将click改造为下面所示

  click=()=>{
    this.setState({
           count:this.state.count+1
        })
  }

箭头函数中的this 会向外找，自然就指向当前实例。就可以调用setState。

• 箭头函数。在调用时改造为下面所示

 <button onClick={()=>this.click()}>点击</button>

这样可以的原因是，箭头函数中的的this ，会向外找，也就是指向render。所以当前this属于当前实例。在button中this又指向click。click中的this是谁调用就指向谁。在button中当前实例调用的。所以click中this指向当前实例。自然就可以调用setState

• 使用bind。在类组件中添加下面的代码

  constructor(){
   super()
   this.click=this.click.bind(this)
 }

这样是将时间处理冲的this与当前实例绑定到一起了。所以就可以调用setState。

6.表单处理

通过一个时间处理程序处理多个表单元素

import React from 'react';
import ReactDOM from 'react-dom';

class My extends React.Component {
state={
  text:'',
  city:'ly',
  isCheked:false

}
handleChange=e=>{
  //获取当前DOM对象
  const target=e.target;
  //根据类型获取值
  const value=target.type==='checkbox'?target.checked:target.value
  //获取name
  const name=target.name

  this.setState({
    [name]:value
  })
}

  render() {
    return (
      <div>
       <input type="text "name="text" value={this.state.txt } onChange={this.handleChange}></input>
       <br></br>
       <select name="city" value={this.state.city} onChange={this.handleChange}>
         <option value="bj">北京</option>
         <option value="ly">洛阳</option>
       </select>
       <input name="checkbox" type="checkbox" checked={this.state.isCheked} onChange={this.handleChange}></input>
      </div>)
  }
}
//渲染组件
ReactDOM.render(<My></My>, document.getElementById('root'))