react组件

React组件有两种创建方式分别为 函数组件、类组件

函数组件

函数名必须以大写字母开头
函数组件必须有返回值，表示该组件的结构
返回值为null、表示不渲染
使用时直接将函数名作为标签名

例如：

import React from 'react'

const Func = () => {
    return <div>
        这是我创建的函数式组件
        </div>
}   
export default Func

//使用时直接使用标签的形式 <Func />

类组件

使用ES6中的class创建类
类组件名称也以大写字母开头
类组件应该继承React.Component父类,从而使用父类中的方法
类组件必须有render（）方法
使用时直接将名称作为标签名

例如：

import React from 'react'

class Com extends React.Component {
    render() {
        return <div>
            这是我创建的类组件
        </div>
    }
}
export default Com

//使用时直接使用标签的形式 <Com />

事件绑定

react事件绑定语法与Vue事件语法相似

语法 on+事件名称={事件处理函数} 、事件为驼峰命名

例如：

在类组件中

import React from 'react'

class Com extends React.Component {

    handler=()=>{
        console.log('我被点了')
    }
    render() {
        return <div>
            <button onClick={this.handler}>点我！！</button>
        </div>
    }
}
export default Com

在函数式组件中

import React from 'react'

const Func = () => {

    const handler =()=>{
        console.log('我被点了')
    }

    return <div>
       <button onClick={handler}>点我！！</button>
</div>
}
export default Func

事件对象

在react中事件对象叫做合成事件（对象）

在事件处理函数中用e获取到事件对象

 const handler =(e)=>{
        console.log('这是事件对象',e)
    }

输出的结果：

所以我们可以通过事件处理函数中的事件对象，拿到相应的信息

有状态组件和无状态组件

函数组件叫做无状态组件

类组件叫做有状态组件

状态（state）即数据

函数组件没有自己的状态，子负责数据展示（静），可以使用Hooks使函数式组件也有状态

类组件有自己的状态，负责更新，让页面动起来

组件中的state和setState

state

状态即数据，是组件内部的私有数据，只能在组件内部使用

state的值是对象，表示一个组件可以有多个数据

简化语法：

class Com extends React.Component {
    state ={
        name:'小周'
    }
    render() {
        return <div>
            <h1>{this.state.name}</h1>  
        </div>
    }
}
export default Com

setState() 修改状态

状态是可改变的

语法: this.steState({要修改的数据})

不要直接修改state中的值，错误的,需要配合 setState()

setState（）作用：

修改state
更新UI

事件绑定this指向

在类组件中的函数推荐使用箭头函数

事件处理程序中的this指向的是undefined

render方法中的this指向的而是当前react组件。只有事件处理程序中的this有问题

方案1：箭头函数
方案2：bind修改this指向
方案3：类实例方法

在render中使用箭头函数

箭头函数的特点：自身没有this，访问的是外部的this

方式1

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  render() {
    return (
      <div>
        <button onClick={() => { console.log(this.state.msg) }>点我</button>
      </div>
    )
  }
}

缺点：会把大量的js处理逻辑放到JSX中，将来不容易维护

方式2

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => {this.handleClick()}}>点我</button>
      </div>
    )
  }
}

缺点：把大量的js逻辑写在了JSX结构中，不好维护

解决方案2：使用bind

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

或者

class App extends React.Component {
  constructor() {
    super()
    this.handleClick = this.handleClick.bind(this)
  }
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

解决方案3：class实例方法

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}

注意：这个语法是试验性的语法，但是有babel的转义，所以没有任何问题

表单处理

HTML中的表单元素是可以输入的，也就是有自己的可变状态、而React中可变状态通常保存在state中，并只能通过setState（）方法来修改，React将state与表单元素值value绑定到一起，有state的值来控制表单元素的值

受控组件

受控组件是值受到React控制的表单元素

在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）

给表单元素绑定change事件，将表单元素值设为state的值（控制表单元素值的变化）

拓展：多表单元素优化

给表单元素添加name属性，名称与state相同
根据表单元素类型获取对应值
当事件触发，判断表单元素的类型（value和checked）
通过setState()和[name]来修改表单元素值

非受控组件

非受控组件借助ref，使用原生DOM方式来获取表单元素值

ref的作用：获取DOM 或组件

调用React.createRef()方法创建一个ref对象 this.txtRef = React.createRef()
将创建好的ref对象添加到文本框中 <input type="text" ref={this.txtRef}>
通过ref对象获取到文本框的值 console.log(this.txtRef.value)

感谢阅读！！！

react组件介绍