React 组件介绍

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

React 组件的两种创建方式

使用函数创建组件

使用 JS 的函数（或箭头函数）创建的组件
函数名必须以大写字母开头
函数组件必须有返回值，表示该组件的结构，如果返回值为 null，表示不渲染任何内容

function Hello() {
    retunr (
        <div>这是一个函数组件！</div>
    )
}

const Hello = () =>　<div>这是一个函数组件！</div>

渲染函数组件

用函数名作为组件标签名
组件标签可以是单标签也可以是双标签

function Hello() {
    retunr (
        <div>这是一个函数组件！</div>
    )
}

const Hello = () =>　<div>这是一个函数组件！</div>

ReactDOM.render(<Hello />, document.querySelector('#root'))
/*
  执行了ReactDOM.render(<Hello />, ...之后，发生了什么？
    1. React 解析组件标签，找到了 Hello 组件
    2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟 DOM 转为真实的 DOM，随后呈现在页面中
*/

使用类创建组件

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

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

// 渲染类组件
ReactDOM.render(<Hello />, document.querySelector('#root'))
/*
  执行了ReactDOM.render(<Hello />, ...之后，发生了什么？
    1. React 解析组件标签，找到了 Hello 组件
    2. 发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用到原型上的 render 方法
    3. 将 render 返回的虚拟 DOM 转为真实的 DOM，随后呈现在页面中
*/

抽离为独立 JS 文件

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

// Hello.js 文件
import React from 'react'
class Hello extends React.Component {
    render() {
        return (
            <div>Hello Class Component!</div>
        )
    }
}
// 导出 Hello 组件
export default Hello

// index.js 文件
import Hello from './Hello'
// 渲染导入的 Hello 组件
ReactDOM.render(<Hello />, document.querySelector('#root'))

React 事件处理

事件绑定

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>
    )
}

事件对象

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

function App() {
    function handleClick(e) {
        e.preventDefault()
        console.log('事件对象', e)
    }
    return (
        <a onClick={ handleClick }>a 链接</a>
    )
}

有状态组件和无状态组件

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

比如计数器案例中，带年纪按钮让数值加 1。0 和 1 就是不同时刻的状态，而由 0 变为 1 就表示状态发生了变化。状态变化后，Ui 也要相应的更新。React 中想要实现该功能，就要使用有状态组件来完成

组件中的 state 和 setState()

state 使用

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

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

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

获取状态：`this.state`

clss Hello extends React.Component {
    state = {
        count: 0
    }
    render() {
        return (
            <div>有状态的组件，{ this.state.count }</div>
        )
    }
}

setState() 修改状态

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

// 正确
clss Hello extends React.Component {
    state = {
        count: 0
    }
    render() {
        return (
            <div>
                <h1>计数器：{ this.state.count }</h1>
                <button onClick={ () => { this.setState({ count: this.state.count++ }) } }>+1</button>
            </div>
        )
    }
}
// 正确
this.setState({
    count: this.state.count++
})
// 错误
this.state.count++

从 JSX 中抽离事件处理程序

JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证 JSX 结构清晰
事件处理程序中的 this 是 undefined

clss Hello extends React.Component {
    state = {
        count: 0
    }
    // 事件处理程序
    onIncrement() {
        this.setState({
            count: this.state.count++
        })
    }
    render() {
        return (
            <div>
                <h1>计数器：{ this.state.count }</h1>
                <button onClick={ () => this.onIncrement() }>+1</button>
            </div>
        )
    }
}

事件绑定 this 指向

箭头函数

利用箭头函数自身不绑定 this 的特点

clss Hello extends React.Component {
    state = {
        count: 0
    }
    // 事件处理程序
    onIncrement() {
        this.setState({
            count: this.state.count++
        })
    }
    render() {
        return (
            <div>
                <h1>计数器：{ this.state.count }</h1>
                <button onClick={ () => this.onIncrement() }>+1</button>
            </div>
        )
    }
}

`Function.prototype.bind()`

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

clss Hello extends React.Component {
    constructor() {
        super()
            this.state = {
            count: 0
        }
        this.onIncrement = this.onIncrement.bind(this)
    }
    // 事件处理程序
    onIncrement() {
        this.setState({
            count: this.state.count++
        })
    }
    render() {
        return (
            <div>
                <h1>计数器：{ this.state.count }</h1>
                <button onClick={ this.onIncrement }>+1</button>
            </div>
        )
    }
}
this.onIncrement = this.onIncrement.bind(this)

`class` 的实例方法

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

clss Hello extends React.Component {
    state = {
        count: 0
    }
    // 事件处理程序
    onIncrement = () => {
        this.setState({
            count: this.state.count++
        })
    }
    render() {
        return (
            <div>
                <h1>计数器：{ this.state.count }</h1>
                <button onClick={ this.onIncrement }>+1</button>
            </div>
        )
    }
}

表单处理

受控组件

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

受控组件使用步骤

在 state 中添加一个状态，作为表单元素的 value值（控制表单元素的来源）
给表单元素绑定 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>
        )
    }
}

多表单元素优化步骤

给表单元素添加 name 属性，名称与 state 相同
根据表单元素类型取对应值

在 change 事件处理程序中通过 [name] 来修改对应的 state

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

// 根据表单元素类型取值
const value = target.type === 'checkbox' ? target.checked : target.value

// 根据 name 设置对应 state
const name = target.name
this.setState({
 [name]: value
})

非受控组件（DOM方式）

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

非受控组件使用步骤

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

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

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

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

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

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

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

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

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

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

state 总结

组件中 render 方法中的 this 为组件实例对象
组件自定义的方法中 this 为 undefined，解决：
- 强制绑定 this 通过函数对象的 bind()
- 箭头函数
状态数据：不能直接修改或更新，要使用 setState({ })

React-组件基础

React 组件介绍

React 组件的两种创建方式

使用函数创建组件

渲染函数组件

使用类创建组件

抽离为独立 JS 文件

React 事件处理

事件绑定

事件对象

有状态组件和无状态组件

组件中的 state 和 setState()

state 使用

获取状态：`this.state`

setState() 修改状态

从 JSX 中抽离事件处理程序

事件绑定 this 指向

箭头函数

`Function.prototype.bind()`

`class` 的实例方法

表单处理

受控组件

受控组件使用步骤

多表单元素优化步骤

非受控组件（DOM方式）

非受控组件使用步骤

state 总结

目录

可能感兴趣

React-组件基础

React 组件介绍

React 组件的两种创建方式

使用函数创建组件

渲染函数组件

使用类创建组件

抽离为独立 JS 文件

React 事件处理

事件绑定

事件对象

有状态组件和无状态组件

组件中的 state 和 setState()

state 使用

获取状态：this.state

setState() 修改状态

从 JSX 中抽离事件处理程序

事件绑定 this 指向

箭头函数

Function.prototype.bind()

class 的实例方法

表单处理

受控组件

受控组件使用步骤

多表单元素优化步骤

非受控组件（DOM方式）

非受控组件使用步骤

state 总结

目录

可能感兴趣

获取状态：`this.state`

`Function.prototype.bind()`

`class` 的实例方法