1.React组件介绍
组件是React的一等公民,使用React就是在用组件。
组件表示页面中的部分功能。
组合多个组件实现完整的页面功能。
特点:可复用、独立、可组合。
2.React组件的两种创建方式
2.1 使用函数创建组件
函数组件:使用js的函数
约定1:函数名称必须以大写字母开头
约定2:函数组件必须有返回值,表示该组件的结构
如果返回值是null,表示不渲染任何内容
// 普通函数
function Hello(){
return (
<div>这是我的第一个组件</div>
)
}
// 箭头函数
const Hi = ()=><div>这是我的第一个函数组件</div>
ReactDOM.render(<Hi></Hi>, document.getElementById('root'))
2.2 使用类创建组件
类组件:使用ES6的class创建的组件
约定1:类名称也必须以答谢字母开头
约定2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性
约定3:类组件必须提供render()方法
约定4:render()方法必须有返回值,表示该组件的结构
class Hello extends React.Component{
render(){
return (
<div>这是我的第一个类组件</div>
)
}
}
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))
2.3 抽离为独立JS组件
组件作为一个独立的个体,一般都会放到一个单独的JS文件中。
1.创建Hello.js
2.在Hello.js中导入React
3.创建组件(函数 或 类)
4.在Hello.js中导出该组件
5.在index.js中导入Hello组件
6.渲染组件
3.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中的事件对象叫做:合成事件(对象)
合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题
4.有状态组件和无状态组件
函数组件又叫做无状态组件,组件类又叫做有状态组件
状态(state)即数据
函数组件没有自己的状态,只负责数据显示(静)
类组件有自己的状态,负责更新UI,让页面“动”起来
5. 组件中的state和setState
5.1 state的基本使用
状态(state)即数据,是组件内部的私有数据,只能在组件内部使用
state的值是对象,表示一个组件中可以有多个数据
获取状态:this.state
class App extends React.Component{
// constructor(){
// super()
// // 初始化state
// this.state = {
// count: 0
// }
// }
// 简化语法初始化state(推荐)
state = {
count: 0
}
render(){
return (
<div>
<h1>计数器:{this.state.count}</h1>
</div>
)
}
}
5.2 setState()修改状态
状态是可变的
语法:this.setState({要修改的数据})
注意:不要直接修改state中的值,这是错误的!!!
setState()作用:1.修改state,2.更新UI
思想:数据驱动视图
class App extends React.Component{
// constructor(){
// super()
// // 初始化state
// this.state = {
// count: 0
// }
// }
// 简化语法初始化state(推荐)
state = {
count: 0
}
render(){
return (
<div>
<h1>计数器:{this.state.count}</h1>
<button onClick={()=>{
this.setState({
count:this.state.count + 1
})
}}>+1</button>
</div>
)
}
}
从JSX中抽离事件处理程序
JSX中掺杂过多JS逻辑代码,会显得非常混乱
推荐:将逻辑抽离到单独的方法中,保证JSX结构清晰
6.事件绑定this指向
6.1 箭头函数
利用箭头函数自身不绑定this的特点
class App extends React.Component{
// constructor(){
// super()
// // 初始化state
// this.state = {
// count: 0
// }
// }
// 简化语法初始化state(推荐)
state = {
count: 0
}
onIncrement(){
this.setState({
count:this.state.count + 1
})
}
render(){
return (
<div>
<h1>计数器:{this.state.count}</h1>
<button onClick={()=>this.onIncrement()}>+1</button>
</div>
)
}
}
6.2 Function.prototype.bind()
利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起
class App extends React.Component{
constructor(){
super()
this.state = {
count: 0
}
this.onIncrement = this.onIncrement.bind(this)
}
onIncrement(){
this.setState({
count:this.state.count + 1
})
}
render(){
return (
<div>
<h1>计数器:{this.state.count}</h1>
{/* 箭头函数中的this指向外部环境,此处为:render()方法 */}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
6.3 class的实例方法(推荐)
利用箭头函数形式的class实例方法
注意:该语法是实验性的语法,但是由于babel的存在可以直接使用
class App extends React.Component{
constructor(){
super()
this.state = {
count: 0
}
this.onIncrement = this.onIncrement.bind(this)
}
onIncrement = () => {
this.setState({
count:this.state.count + 1
})
}
render(){
return (
<div>
<h1>计数器:{this.state.count}</h1>
{/* 箭头函数中的this指向外部环境,此处为:render()方法 */}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
7.表单处理
7.1 受控组件
html中的表单元素是可输入的,也就是有自己的可变状态
但是,React中可变状态通常保存在state中,并且只能通过setState()方法来修改
React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值
受控组件:其值受到React控制的表单元素
步骤:
1.在state中添加一个状态,作为表单元素的value值(控制表单元素值得来源)
2.给表单元素绑定change事件,将白哦单元素的值设置为state的值(控制表单元素值得变化)
示例:
class App extends React.Component{
state ={
txt:'',
content:'',
city:'bj',
isChecked: false
}
handleChange = (e)=>{
this.setState({
txt:e.target.value
})
}
// 处理富文本框的变化
handleContent = (e)=>{
this.setState({
content:e.target.value
})
}
// 处理下拉框的变化
handleCity = (e)=>{
this.setState({
city: e.target.value
})
}
// 处理复选框的变化
handleChecked = e =>{
this.setState({
isChecked:e.target.checked
})
}
render(){
return (
<div>
{/* 文本框 */}
<input type="text" value={this.state.txt} onChange={this.handleChange}></input>
<br/>
{/* 富文本框 */}
<textarea value={this.state.content} onChange={this.handleContent}></textarea>
<br/>
{/* 下拉框 */}
<select value={this.state.city} onChange={this.handleCity}>
<option value="sh">上海</option>
<option value="bj">北京</option>
<option value="gz">广州</option>
</select>
<br/>
{/* 复选框 */}
<input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked}></input>
</div>
)
}
}
示例总结:
1.文本框、富文本框、下拉框 操作value属性
2.复选框 操作checked属性
多表单元素优化
问题:每个表单都有一个单独的事件处理程序处理太繁琐
优化:使用一个事件处理程序同时处理多个表单元素
多表单元素优化步骤
1.给表单元素添加name属性,名称与state相同
2.根据表单元素类型获取对应值
3.在change事件处理程序中通过[name]来修改对应的state
class App extends React.Component{
state ={
txt:'',
content:'',
city:'bj',
isChecked: false
}
handleForm = (e)=>{
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type === 'checkbbox' ? 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}></input>
<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>
<option value="gz">广州</option>
</select>
<br/>
{/* 复选框 */}
<input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}></input>
</div>
)
}
}
7.2 非受控组件(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(h) {
return (
<div>
<input type="text" ref={this.txtRef}></input>
<button onClick={this.getTxt}>获取文本框的值</button>
</div>
)
}
}
总结:
React组件基础
1.组件的两种创建方式:函数组件和类组件
2无状态(函数)组件,负责静悉结构展示
3.有状态〔类)组件,负责更新UI,让页面动起来
4.绑定事件注意 this指向问题
5.推荐使用受控组件来处理表单
6.完全利用S语言的能力创建组件,这是React的思想