react组件

React组件

React组件介绍

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

React组件的两种创建方式

1. 使用函数创建组件
  - 函数组件：使用JS的函数（或箭头函数）创建的组件
  - 约定1：函数名称必须以大写字母开头,React据此区分组件和普通的React元素
  - 约定2：函数组件必须有返回值，表示该组件的结构
  - 如果返回值为null，表示不渲染任何内容
  - 渲染函数组件：用函数名作为组件标签名
  - 组件标签可以是单标签也可以是双标签
  - 示例：
```
const Hello = () => (<div>这是我的第一个函数组件！！！</div>)
```
2. 使用类创建组件
  - 类组件：使用ES6 的class创建的组件
  - 约定1：类名称也必须以大写字母开头
  - 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
  - 约定3：类组件必须提供render()方法
  - 约定4：render()方法必须有返回值，表示该组件的结构
  - 示例：
```
class Hello extends React.Component {
    render() {
        return (
            <div>这是我的第一个类组件！！！</div>
        )
    }
}
// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))
```
3. 抽离为独立JS文件
  - 1、创建Hello.js
  - 2、在Hello.js中导入React
  - 3、创建组件（函数或类）
  - 4、在Hello.js中导出该组件
  - 5、在index.js中导入Hello组件
  - 6、渲染组件
  - 示例：
```
// Hello.js
import React from "react";


class Hello extends React.Component{
    render() {
        return (
            <div>第一个抽离的组件</div>
        )
    }
}

export default Hello


// index.js
import Hello from "./Hello";
ReactDOM.render(<Hello />, document.getElementById('root'))
```

React事件处理

事件绑定

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

示例：

// 方式一，使用class
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>
    )
}


ReactDOM.render(<App/>, document.getElementById('root'))

事件对象

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

示例：

class App extends React.Component{
    handleClick(e){
        // 阻止浏览器行为
        e.preventDefault()
        console.log('阻止浏览器行为')
    }
    render() {
        return (
            <a href="https://www.baidu.com/" onClick={this.handleClick}>百度</a>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

有状态组件与无状态组件

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

组件中的state和setState()

state的基本使用

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

示例：

class App extends React.Component {
    // constructor() {
    //     super();
    //     this.state = {
    //         count: 0
    //     }
    // }
    // 精简版
    state = {
        count: 0
    }

    render() {
        return (
            <div>有状态组件, {this.state.count}</div>
        )
    }

}
ReactDOM.render(<App/>, document.getElementById('root'))

setState()修改状态

状态是可变的
语法：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
                        })

                        // 错误示例
                        // this.state.count += 1
                    }
                }>+1
                </button>
            </div>
        )
    }

}
ReactDOM.render(<App/>, document.getElementById('root'))

从JSX中抽离事件处理程序
- JSX中掺杂过多JS逻辑代码，会显得非常混乱
- 推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
- 报错原因：事件处理程序中this的值为undefined
- 希望：this指向组件实例（render方法中的this即为组件实例）

事件绑定this指向

1.箭头函数

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

示例：

class App extends React.Component {

    state = {
        count: 0
    }
    onIncrement(){
        console.log(this)
        this.setState({
            count: this.state.count + 1
        })
    }

    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 App extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
        this.onIncrement = this.onIncrement.bind(this)
    }

    onIncrement(){
        console.log(this)
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>计数器： {this.state.count}</h1>
                <button onClick={this.onIncrement}>
                    +1
                </button>
            </div>
        )
    }

}
ReactDOM.render(<App/>, document.getElementById('root'))

3.class的实例方法

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

示例：

class App extends React.Component {
    state = {
        count: 0
    }

    onIncrement = () => {
        console.log(this)
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div>
                <h1>计数器： {this.state.count}</h1>
                <button onClick={this.onIncrement}>
                    +1
                </button>
            </div>
        )
    }

}
ReactDOM.render(<App/>, document.getElementById('root'))

表单处理

1.受控组件

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

示例：

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

步骤：

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

示例：

class App extends React.Component{
    state = {
        txt: ''
    }
    handleChange = (e) => {
        this.setState({
            txt: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.txt}
                       onChange={this.handleChange}
                />
            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

示例总结：

文本框、富文本框、下拉框操作value属性
复选框操作checked属性

示例：

class App extends React.Component{
    state = {
        txt: '',
        content: '',
        city: 'bj',
        isChecked: false
    }
    // 处理文本
    handleChange = e => {
        this.setState({
            txt: e.target.value
        })
    }

    // 处理富文本
    handleContent = e => {
        this.setState({
            content: e.target.value
        })
    }

    // 处理下拉框
    handleCity = e => {
        this.setState({
            city: e.target.value
        })
    }

    // 处理复选框
    handleChecked = e => {
        this.setState({
            isChecked: e.target.checked
        })
    }



    render() {
        return (
            <div>
                {/*文本框 */}
                <input type="text" value={this.state.txt}
                       onChange={this.handleChange}
                />
                <br/>

                {/*富文本框 */}
                <textarea value={this.state.content} onChange={this.handleContent}/>
                <br/>

                {/*下拉框 */}
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="nj">南京</option>
                </select>
                <br/>

                {/*复选框 */}
                <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}/>

            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

多表单元素优化：

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

优化步骤：

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

示例：

class App extends React.Component{
    state = {
        txt: '',
        content: '',
        city: 'bj',
        isChecked: false
    }

    handleForm = 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="txt" value={this.state.txt}
                       onChange={this.handleForm}
                />
                <br/>

                {/*富文本框 */}
                <textarea name="content" value={this.state.content} onChange={this.handleForm}/>
                <br/>

                {/*下拉框 */}
                <select name="city" value={this.state.city} onChange={this.handleForm}>
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                    <option value="nj">南京</option>
                </select>
                <br/>

                {/*复选框 */}
                <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm}/>

            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

2.非受控组件

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

步骤：

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

示例：

class App extends React.Component {
    constructor() {
        super();

        // 创建ref
        this.txtRef = React.createRef()
    }

    // 获取文本框的值
    getTxt = () => {
        console.log('打印')
        console.log(this.txtRef.current.value)
    }

    render() {
        return (
            <div>
                {/*文本框 */}
                <input type="text" ref={this.txtRef} />
                <button onClick={this.getTxt}>获取文本框的值</button>
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))