共计 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 文件
- 创建 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({ })
正文完