React基础组件和类组件

特点：

组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

React 组件的两种创建方式

使用函数创建函数
函数名称大写开头
必须有返回值
渲染函数组件：用函数名作为组件标签名

// 函数组件
const App = () => {
    return (
        <div>
            hello
        </div>
    );
}

使用类创建组件
使用ES6 的class创建的组件

import React from 'react'
class Thp extends React.Component {
    render () {
        return (
            <div>我是类组件</div>
        )
    }
}
export default Thp

React 事件处理 

React 事件绑定语法与DOM事件语法相似

语法：on + 事件名称 = {事件处理程序}，比如：onClick={()=>{}}

//	函数中的事件绑定
const Event = () => {
    const singleClick = () => {
        console.log(`函数组件点击`)
    }
    return (
        <button onClick={singleClick}>函数组件事件点击</button>
    )
}
//	类组件中的事件绑定
import React from 'react'
class Event extends React.Component {
    render () {
        return (
            <button onClick={this.singleClick}>类组件事件处理</button>
        )
    }
    singleClick () {
        console.log(`类组件点击`)
    }
}

有状态组件和无状态组件 

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

组件中的state和setState() 

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

class Event extends React.Component {
    state = {
        name: "类组件时间处理"
    }
    render () {
        return (
            <button onClick={this.singleClick}>{this.state.name}</button>
        )
    }
    singleClick () {
        console.log(`类组件点击`)
    }
}

setState()修改状态
语法：this.setState({要修改的值})
注意：不要直接修改state中的值
数据驱动视图 

class Event extends React.Component {
    render () {
        return (
            <div>
                {this.state.const}
                <button onClick={this.add}>+1</button>
            </div>

        )
    }
    state = {
        const: 0,
    }
    add = () => {
        this.setState({
            const: this.state.const + 1
        })
    }
}

 事件绑定this指向

1、箭头函数

利用箭头函数自身不绑定this的特点
箭头函数指向的是render()方法中的this 为组件实例，所以可以获取到方法
在方法里面写箭头函数 

<button onClick={ () => this.singleClick}>{this.state.name}</button>

2、Function.prototype.bind()

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

// 第一中
constructor() {
	super()
	this.方法名  = this.方法名.bind(this)
}
//	第二种
<button onClick={this.singleClick.bind(this)}>{this.state.name}</button>

 3、class的实例方法

方法直接写箭头函数

singleClick = () => {
}

表单的处理

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

class Form extends React.Component {
    constructor() {
        super()
        this.state = {
            name: ''
        }
    }
    render () {
        return (
            <div>
                <input type='text' value={this.state.name} onChange={this.handleChange} />
            </div>
        )
    }
    handleChange = e => {
        this.setState({
            name: e.target.value
        })
    }
}

class Form extends React.Component {
    constructor() {
        super()
        this.state = {
            name: ''
        }
    }
    render () {
        return (
            <div>
                <input type='text' value={this.state.name} onChange={this.handleChange} name="name" />
            </div>
        )
    }
    handleChange = e => {
        const target = e.target
        // 判断是	选择	还是	输入
        const value = target.type === `checkbox` ? target.checked : target.value
		// 获取name的值
        const name = target.name
		// 去赋值
        this.setState({
            [name]: value
        })
    }
}

 非受控组件
1、调用React.createRef()方法创建一个ref对象
2、创建好的ref对象添加到文本框中
3、通过ref对象获取到文本框的值

// 非受控组件 （不推荐）
class Form extends React.Component {
    constructor() {
        super()
        // 创建ref
        this.textRef = React.createRef()
    }
    // 获取文本框的值
    getTextRef = () => {
        console.log(this.textRef.current.value)
    }
    render () {
        return (
            <div>
                <input type='text' ref={this.textRef} />
                <button onClick={this.getTextRef}>获取值</button>
            </div>

        )
    }

}