组件是 React 的一等公民，使用 React 就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合
<!-- 2.React 组件的两种创建方式 -->
1 使用函数创建组件
函数组件：使用 JS 的函数（或箭头函数）创建的组件
约定1：函数名称必须以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为 null，表示不渲染任何内容
渲染函数组件：用函数名作为组件标签名
组件标签可以是单标签也可以是双标签
组件名称必须以大写字母开头， React 据此区分 组件 和 普通的React 元素
function Hello() {
return (
<div>这是我的第一个函数组件！</div>
)
}
ReactDOM.render(<Hello />, root)
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)
<!-- 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>Hello Class Component!</div>
}
}
// 导出Hello组件
export default Hello
// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
ReactDOM.render(<Hello />, root)
<!-- 4. React 事件处理 -->
1 事件绑定
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>
)
}
2 事件对象
可以通过事件处理程序的参数获取到事件对象
React 中的事件对象叫做：合成事件（对象）
合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题
function handleClick(e) {
e.preventDefault()
console.log('事件对象', e)
}
<a onClick={handleClick}>点我，不会跳转页面</a>
<!-- 5.有状态组件和无状态组件 -->
函数组件又叫做无状态组件，类组件又叫做有状态组件
状态（state）即数据
函数组件没有自己的状态，只负责数据展示（静）
类组件有自己的状态，负责更新 UI，让页面“动” 起来
比如计数器案例中，点击按钮让数值加 1 。0 和 1 就是不同时刻的状态，而由 0 变为 1 就表示状态发生了变
化。状态变化后，UI 也要相应的更新。React 中想要实现该功能，就要使用有状态组件来完成。
<!-- 6.组件中的 state 和 setState -->
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>
)
}
}
2.获取状态：this.state
状态即数据
状态是私有的，只能在组件内部使用
通过 this.state 来获取状态
class Hello extends React.Component {
// 简化语法
state= {
count: 0
}
render() {
return (
<div>有状态组件，{this.state.count}</div>
)
}
}
<!-- 3.setState()修改状态 -->
状态是可变的
语法：this.setState({ 要修改的数据 })
注意：不要直接修改 state 中的值，这是错误的！！！
setState() 作用：1. 修改 state 2. 更新UI
思想：数据驱动视图
this.setState({
count: this.state.count + 1
})
<!-- 4.从 JSX 中抽离事件处理程序 -->
JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证 JSX 结构清晰
<!-- 5.事件绑定 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>
)
}
}
-----------------------------------------------
<!-- 1 受控组件 -->
HTML 中的表单元素是可输入的，也就是有自己的可变状态
而，React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改
React将 state 与表单元素值value绑定到一起，由 state 的值来控制表单元素的值
受控组件：其值受到 React 控制的表单元素
1. 文本框、富文本框、下拉框 操作value属性
2. 复选框 操作checked属性
1. 在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2. 给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）
state = { txt: '' }
<input type="text" value={this.state.txt}
onChange={e => this.setState({ txt: e.target.value })}
/>
<!-- 2.多表单元素优化步骤： -->
1. 给表单元素添加name属性，名称与 state 相同
2. 根据表单元素类型获取对应值
3. 在 change 事件处理程序中通过 [name] 来修改对应的state
/* 受控组件示例*/
import React from 'react'
import ReactDOM from 'react-dom'
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}></textarea>
<br/>
{/* 下拉框 */}
<select name="city" value={this.state.city} onChange={this.handleForm}>
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
<br/>
{/* 复选框 */}
<input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root')) // 渲染组件
<!-- 3.非受控组件 -->
说明：借助于 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('文本框值为：', 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'))