react组件 --- 基础

一. react组件介绍

• 使用react就是在使用组件
• 组件表示页面的部分功能
• 特点: 可复用性 独立 可组合

二 . react组件的创建方式

2.1. 使用函数创建组件

• 使用js的函数(或者箭头函数)创建的组件
• 函数名必须以大写字母开头
• 函数组件必须有返回值, 表示该组件的结构
• 如果函数返回null, 表示不渲染任何内容

function Hello() { // 大写字母开头
	return (
		<div>这是我的第一个组件</div>
	)
}
// 箭头函数创建
const Hello = () => <div>这是我的第一个组件</div>

// 渲染组件:
ReactDOM.render(<Hello />, document.getElementById('root'))

2.2. 使用类创建组件

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

class Hello extends React.Component {
	render() {
		return (
			<div>这是我的第一个组件<div>
		)
	}
}

// 组件渲染
ReactDOM.render(<Hello />, document.getElementById('root'))

2.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>第一个独立组件</div>
		)
	}
}

index.js

import Hello from './Hello'
ReactDOM.render(<Hello />, document.getElementById('root'))

三. react中的事件处理

3.1. 事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法: on + 事件名称= {事件处理程序} 如: onClick={() => {}}

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

3.2. 事件对象

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

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
	handleClick() {
		// 阻止浏览器默认事件
		e.preventDefault()
	}
	render() {
		return (
			<a href="http://itcast.cn/" onClick="{this.handleClick}">单击</a>
		)
	}
}
ReactDOM.render(<App />, document.getElementById('root'))

四. 有状态组件和无状态组件

4.1 两者区别

• 函数组件无状态组件，类组件有状态组件
• 状态（state）数据
• 函数组件没有状态，只负责数据展示
• 类组件有自己的状态，负责更新UI

五. 组件中的state和setState()

5.1. 组件中的state

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

class Hello extends React.Component {
	constructor() {
		super()
		// 初始化state
		this.state = {
			count: 0
		}
	}
	render() {
		return (
			<div>有状态组件</div>
		)
	}
}
// ES6 简化语法
class App extends React.Component {
	state = {
		count: 0
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
		)
	}
}
ReactDOM.render(<App />, document.getElementById('root'))

5.2 setState() 修改状态

• 状态是可变的
• 语法： this.setState({要修改的值})
• setState() 作用： 1、修改 2、更新UI
• 思想： 数据驱动试图

class App extends React.Component {
	state = {
		count: 0
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
			<button onclick={() => {
				this.setState({
				count: this.state.count + 1
				})
			}}>+1</button>
		)
	}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

5.3 从JSX中抽离事件处理程序

• JSX中掺杂过多的JS逻辑代码，会显得非常混乱

class App extends React.Component {
	state = {
		count: 0
	}
	onIncrement() {
	// this指向undefind 所以这个this会报错 ❌
		this.setState({
			count: this.state.count + 1
		})
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
			<button onclick={this.onIncrement()}>+1</button>
		)
	}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

六. 事件绑定的this指向

6.1 箭头函数

• 箭头函数自身不绑定 this
• render() 方法中的this是组件的实例，可以获取setState

class Hello extends React.Component {
	onIncrement() {
		this.setState({
			count: this.state.count + 1
		})
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
			<button onclick={() => this.onIncrement}>+1</button>
		)
	}
}

6.2 bind() 方法

• bind() 将事件处理程序中的this与组件实例绑定到一起

class Hello extends React.Component {
	constructor() {
		super()
		// 这里的this也指向组件实例
		this.onIncrement = this.onIncrement.bind(this)
	}
	onIncrement() {
		this.setState({
			count: this.state.count + 1
		})
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
			<button onclick={() => this.onIncrement}>+1</button>
		)
	}
}

6.3 class实例方法

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

class Hello extends React.Component {
	onIncrement = () => {
		this.setState({
			count: this.state.count + 1
		})
	}
	render() {
		return (
			<div>计数器： { this.state.count }</div>
			<button onclick={() => this.onIncrement}>+1</button>
		)
	}
}

七. 表单处理

7.1 受控组件

• HTML中的表单元素可以输入，也就是有自己的可变状态
• React 中可变状态都存储再state, 并通过setState()方法来修改
• React将state与表单元素的value绑定到一起，由state来控制表单的值
• 受控组件： 收到react控制的组件

步骤

1. 在state中添加一个状态，作为表单元素的value(控制表单元素值的来源)
2. 给表单元素设置一个change事件，将表单元素的值设置为 state

class Hello extends React.Component {
	state = { text: '' }
	render(
		<input type="text" value={this.state.text} onChange={e => this.setState({ txt: e.target.value })}></input>
	)
}

7.2 示例

class Hello extends React.component {
	state = {
		txt: '',
		content: '',
		city: '',
		isCheckted: false     
	}
	handleTxt = e => {
		this.setState({
			txt: e.target.value
		})
	}
	handleCountent = e => {
		this.setState({
			content: e.target.value
		})
	}
	handleCity = e => {
		this.setState({
			city: e.target.value
		})
	}
	handleChecked = e => {
		this.setState({
			checked: e.target.checked
		})
	}
	render() {
		return (
			/* 文本框 */
			<input type="text" value={this.state.txt} onChange={ this.handleTxt }></input>
			/* 富文本框 */
			<textarea value={this.state.content} onChange={this.handleCountnt}></textarea>
			/* 下拉框 */
			<select value={this.state.city} onChange={this.handleCity}>
				<option value="sh">上海</option>
				<option value="bj">北京</option>
				<option value="hz">杭州</option>
			</select
			/*复选框*/
			<input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}/>
		)
	}
}

代码优化(使用一个事件处理程序处理多个表单元素)
步骤

1. 给表单元素添加 name, 名称与state相同
2. 根据表单元素获取对应值
3. 在change事件处理程序中通过[name]来改对应的state

class Hello extends React.component {
	state = {
		txt: '',
		content: '',
		city: '',
		isCheckted: false     
	}
	handleForm = e => {
		// 获取DOM
		const target = e.target
		// 根据类型取值
		const value = target.type === 'checkbox' ? target.checked : target.value
		const name = target.name
		this.setState({
			[name]: value
		})
	}
	render() {
		return (
			/* 文本框 */
			<input type="text" name="txt" value={this.state.txt} onChange={ this.handleForm }></input>
			/* 富文本框 */
			<textarea name="content" value={this.state.content} onChange={this.handleForm }></textarea>
			/* 下拉框 */
			<select name="city" value={this.state.city} onChange={this.handleForm }>
				<option value="sh">上海</option>
				<option value="bj">北京</option>
				<option value="hz">杭州</option>
			</select
			/*复选框*/
			<input type="checkbox" name="ischecked" checked={this.state.isChecked} onChange={this.handleForm }/>
		)
	}
}

7.3 非受控组件 (不推荐 要操作DOM)
使用步骤

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

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

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

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

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

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