React-组件基础

7次阅读
没有评论

共计 5384 个字符,预计需要花费 14 分钟才能阅读完成。

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 文件

  1. 创建 Hello.js 文件
  2. 在 Hello.js 中导入 React
  3. 创建组件(函数 或 类)
  4. 在 Hello.js 中导出该组件
  5. 在 idnex.js 中导入 Hello 组件
  6. 渲染组件
// 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 事件采用驼峰命名法,比如:onMouseEnteronFocus
// 类组件
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 中想要实现该功能,就要使用有状态组件来完成
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 结构清晰
  • 事件处理程序中的 thisundefined
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 的值来控制表单元素的值
    React-组件基础

受控组件使用步骤

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

多表单元素优化步骤

  1. 给表单元素添加 name 属性,名称与 state 相同
  2. 根据表单元素类型取对应值
  3. 在 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 或组件

非受控组件使用步骤

  1. 调用 React.createRef() 方法创建一个 ref 对象
constuctor() {
    super()
    this.txtRef = React.createRef()
}
  1. 将创建好的 ref 对象添加到文本框中
<input type="text" ref={ this.txtRef } />
  1. 通过 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 总结

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

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计5384字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码