目录
1.在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2.给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）
1.调用 React.createRef() 方法创建一个 ref 对象
1. React 组件介绍
组件是
React
的
一等公
民
，使用
React
就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合
2. React 组件的两种创建方式
2.1 使用函数创建组件
函数组件：使用
JS
的函数（或箭头函数）创建的组件
约
定1：
函数名称必须以
大写
字
母开头
约
定2：函数组
件
必须有返回
值
，表示
该
组件的
结
构
如果返回值为
null，
表示不渲染任何
内
容
function Hello() {
return (
<div>这是我的第一个函数组件！</div>
)
}
渲染函数组件
：
用函数名作为组
件
标签名
组件标签可以是单标签也可以是
双
标签
function Hello() {
return (
<div>这是我的第一个函数组件！</div>
)
}
ReactDOM.render(<Hello />, root)
使
用
JS
中的函数创建的组件叫做：
函
数组件
函数组件必须有返回值
组件名称必须以大写字母开头，
React
据此区
分
组
件
和
普通的React
元素
使用函数名作为组件标签名
function Hello() {
return (
<div>这是我的第一个函数组件！</div>
)
}
ReactDOM.render(<Hello />, root)2.2 使用类创建组件
类组件：使用
ES6
的
class
创建的组件
约
定1：
类名称也必须以
大写
字
母开头
约
定2：
类组件应该继
承
React.Component
父类，从而可以使用父类中提供
的
方法或
属
性
约
定3：
类组件必须提
供
render()
方法
约
定4：render()
方法
必须有返回值
，表示该
组
件的结构
class Hello extends React.Component {
render() {
return <div>Hello Class Component!</div>
}
}
ReactDOM.render(<Hello />, root)2.3 抽离为独立 JS 文件
组件作为一个独立的个体，一般
都
会
放到
一
个单独的
JS
文件中
1.
创
建Hello.js
2.
在
Hello.js
中导入
React
3.
创建组件（函
数
或
类）
4.
在
Hello.js
中导出该组件
5.
在
index.js
中导入
Hello
组件
6.
渲染组件
// index.js import Hello from './Hello' // 渲染导入的Hello组件 ReactDOM.render(<Hello />, root)// Hello.js import React from 'react' class Hello extends React.Component { render() { return <div>Hello Class Component!</div> } } // 导出Hello组件 export default Hello
3. React 事件处理
3.1 事件绑定
React
事件绑定语法与
DOM
事件语法相似
语法
：
on+
事件名称
={
事件
处
理程序
}
，
比
如
：onClick={()
=>
{}}
注意
：
React
事件采用
驼峰命名法
，比如
：onMouseEnter
、
onFocus
在函数组件中绑定事件：
function App() {
function handleClick() {
console.log('单击事件触发了')
}
return (
<button onClick={handleClick}>点我</button>
)
}在类组件中绑定事件：
class App extends React.Component {
handleClick() {
console.log('单击事件触发了')
}
render() {
return (
<button onClick={this.handleClick}></button>
)
}
}3.2 事件对象(e)
可以通
过
事件处理程序的参
数(e)
获
取
到
事
件
对
象
React
中的事件对象叫做：
合成事
件
（对象）
合成事件：兼容所有浏览器，无
需
担心跨
浏
览器兼
容
性问题
function handleClick(e) {
e.preventDefault()
console.log('事件对象', e)
}
<a onClick={handleClick}>点我，不会跳转页面</a>
4. 有状态组件和无状态组件
函数组件又叫
做
无状态组
件
，
类
组
件
又
叫
做
有
状
态
组
件
状态
（state）
即
数据
函数组件没有自己的状态
，
只
负
责
数
据
展
示
（静）
类组件有自己的状态
，
负责更
新
UI
，
让页面“动”
起来
比如计数器案例中，点击按钮让数值加 1 。0 和 1 就是不同时刻的状态，而由 0 变为 1 就表示状态发生了变 化。状态变化后，UI 也要相应的更新。React 中想要实现该功能，就要使用有状态组件来完成。
5. 组件中的 state 和 setState
5.1 state的基本使用
状态
（state）
即数据，是组件内部
的
私有
数
据，只
能
在组件
内
部使用
state
的值是对
象
，表示一个组件
中
可以有
多
个数据
class Hello extends React.Component {
constructor() {
super()
// 初始化state
this.state = {
count: 0
}
}
render() {
return (
<div>有状态组件</div>
)
}
}简化写法（开发中极力推荐）
class Hello extends React.Component {
// 简化语法
state= {
count: 0
}
render() {
return (
<div>有状态组件</div>
)
}
}获取状态：this.state
class Hello extends React.Component {
// 简化语法
state= {
count: 0
}
render() {
return (
<div>有状态组件，{this.state.count}</div>
)
}
}
状态即数据
状态是私有的，只能在组件内部
使
用
通过
this.state
来获取状态
class Hello extends React.Component {
// 简化语法
state= {
count: 0
}
render() {
return (
<div>有状态组件，{this.state.count}</div>
)
}
}
5.2 setState()修改状态
状态是可变的
语法
：this.setState({
要修改的数据
})
注意
：
不要直接修改
state
中的值，这是错误的！！！
setState()
作用
：1.
修改
state
2.
更新
UI
思想
：
数据驱动视图
// 正确
this.setState({
count: this.state.count + 1
})
// 错误
this.state.count += 1
5.3 从 JSX 中抽离事件处理程序
JSX
中掺杂过多
JS
逻辑代码，会显得非常混乱
推荐
：
将逻辑抽离到单独的方法
中
，保
证
JSX
结构清晰
原因：事件处理程序中this 的值为 undefined
希望：this 指向组件实例（render方法中的this即为组件实例）
6. 事件绑定 this 指向
1. 箭头函数
利用箭头函数自身不绑
定
this
的特点
render()
方法中的
this
为组件实例，可以获取
到
setState()
class Hello extends React.Component {
onIncrement() {
this.setState({ … })
}
render() {
// 箭头函数中的this指向外部环境，此处为：render()方法
return (
<button onClick={() => this.onIncrement()}></button>
)
}
}2. Function.prototype.bind()
利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起
class Hello extends React.Component {
constructor() {
super()
this.onIncrement = this.onIncrement.bind(this)
}
// ...省略 onIncrement
render() {
return (
<button onClick={this.onIncrement}></button>
)
}
}3. class 的实例方法（重点推荐）
利用箭头函数形式
的
class
实例方法
注意：该语法是实验性语法，但
是
，由
于
babel
的存
在
可以直
接
使用
class Hello extends React.Component {
onIncrement = () => {
this.setState({ … })
}
render() {
return (
<button onClick={this.onIncrement}></button>
)
}
}7. 表单处理
7.1 受控组件
HTML 中的表单元素是可输入的，也就是有自己的可变状态
而在React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改
state = {
count: 0
}
this.setState({
count: this.state.count + 1
})
React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值
受控组件：其值受到React 控制的表单元素
使用步骤：
1.在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2.给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）
state = { txt: '' }<input type="text" value={this.state.txt}
onChange={e => this.setState({ txt: e.target.value })}
/>受控组件示例总结：
1.
文本框、富文本框、下拉
框
操作
value
属性
2.
复选框
操作
checked
属性
多表单元素优化：
问题：每个表单元素都有一个单
独
的事件
处
理程序
处
理太繁琐
优化：使用一个事件处理程序同
时
处理多
个
表单元素
多表单元素优化步骤：
1.
给表单元素添
加
name
属性，名称与
state
相同
2.
根据表单元素类型获取对应值
3.在 change 事件处理程序中通过 [name] 来修改对应的state
<input
type="text"
name="txt"
value={this.state.txt}
onChange={this.handleForm}
/>
// 根据表单元素类型获取值
const value = target.type === 'checkbox'
? target.checked
: target.value
// 根据name设置对应state
this.setState({
[name]: value
})
7.2 非受控组件
说明：借助于
ref，
使用原生
DOM
方式来获取表单元素值
ref
的作用：获
取
DOM
或组件
使用步骤：
1.调用 React.createRef() 方法创建一个 ref 对象
constructor() {
super()
this.txtRef = React.createRef()
}2.将创建好的 ref 对象添加到文本框中
<input type="text" ref={this.txtRef} />3.通过 ref 对象获取到文本框的值
Console.log(this.txtRef.current.value)总结：
React 组件基础
1. 组件的两种创建方式：函数组件和类组件
2. 无状态（函数）组件，负责静态结构展示
3.有状态（类）组件，负责更新UI ，让页面动起来
4.绑定事件注意 this 指向问题
5.推荐使用受控组件来处理表单
6.完全利用 JS 语言的能力创建组件，这是React 的思想