03.React组件基础

React组件介绍

1.组件是React 的一等公民。使用React就是在用组件

2.组件表示页面中的部分功能

3.组合多个组件实现完整的页面功能

4.特点：可复用，独立，可组合

React组件的两种创建方式

1.使用函数创建组件

``` //函数组件：使用JS 的函数(或箭头函数)创建的组件 //约定1:函数名称必须以大写字母开头 //约定2:函数组件必须有返回值，表示该组件的结构 //如果返回值为null,表示不渲染任何内容 function Hello(){ return(

这是我的一个函数组件！

) } //渲染函数组件：用函数名作为组件标签名 //组件标签可以是单标签也可以是双标签 ReactDOM.render(,root) ```

2.使用类创建组件

``` //类组件：使用ES6 的class 创建的组件 //约定1:类名称也必须以大写字母开头 //约定2:类名称应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性 //约定3:类组件必须提供render()方法 //约定4:render()方法必须有返回值，表示该组件的结构

//创建类组件
class Hello extends React.Component{
render(){
return(

这是我的第一个类组件

)
}
}

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

<h2>把创建好的组件 抽离为独立JS文件</h2>

//1.创建Hello.js
//2.在Hello.js中导入React
//3.创建组件（函数或类）
//4.在Hello.js中导出该组件

//Hello.js
import React from 'react'
class Hello extends React.Component{
render(){
return

Hello Class Component!

}
}
//导出Hello组件
export default Hello

//5.在index.js中导入Hello组件
 //6.渲染组件

import Hello from './Hello'
ReactDOM.render(,root)

<h2>React事件处理</h2>
<p>1.事件绑定</p>

React 事件绑定语法与DOM 事件语法相似
语法：on+事件名称=（事件处理程序），比如：onClick = {()=>{}}
注意：React 事件采用驼峰命名法，比如：onMouseEnter,onFocus

class App extends React.Component{
handleClick(){
console.log('单击事件触发了')
}
render (){
return(

)
}
}

<p>2.事件对象</p>

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

function handleClick(e){
//组织浏览器的默认行为
e.preventDefault()
console.log('事件对象',e)
}
点我，不会跳转页面

<h2>有状态组件和无状态组件</h2>

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态（state）即数据
函数组件没有自己的状态，只负责数据展示（静）
类组件有自己的状态，负责更新UI，让页面‘动’起来

<h2>组件中的state和setState</h2>
<h3>state的基本使用</h3>

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

class App extends React.Component{
constructor(){
super()
//初始化state
this.state={
count:0
}
}
render(){
return(

计数器：

)
}
}

//简写
class App extends React.Component{
state={
count:0
}
render(){
return(

计数器：

)
}
}

//获取状态：this.state
class App extends React.Component{
state={
count:10
}
render(){
return(

计数器：{this.state.count}

)
}
}

<h3>setState()修改状态</h3>

//状态是可变的
//语法：this.setState({要修改的数据})
//注意：不要直接修改state 中的值，这是错误的！！！
//setState()作用：1，修改state 2.更新UI
//思想：数据驱动视图

//正确
this.setState({
count:this.state.count+1
})
//错误
this.state.count+=1

class App extends React.Component{
state={
count:0
}
render(){
return(

计数器：{this.state.count}

<button onClick={()=>{
this.setState({
count:this.state.count+1,
})
}}>+1

)
}

}

<h2>从JSX中抽离事件处理程序</h2>

//JSX 中参杂过多JS逻辑代码，会显得非常混乱
//推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
//问题：事件绑定 this 指向

<h2>事件绑定 this 指向</h2>
<p>1.箭头函数</p>

利用箭头函数自身不绑定this的特点
render()方法中的this 为组件实例，可以获取到setState()
class App extends React.Component{
state={
count:0
}
//事件处理程序
onIncrement(){
this.setState({
count:this.state.count+1
})
}
render(){
//箭头函数中的this 指向外部环境，此处为render()方法
return(

计数器：{this.state.count}

<button onClick={()=>this.onIncrement()}>+1
{/* <button onClick={()=>{
this.setState({
count:this.state.count+1,
})
}}>+1 */}

)
}

}

<p>2. Function:prototype.bind()</p>

利用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(

计数器：{this.state.count}

)
}

}

<p style="color:red">3.class 的实例方法</p>

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

class App extends React.Component{
state={
count:0
}
//事件处理程序
onIncrement=()=>{
this.setState({
count:this.state.count+1
})
}
render(){
return(

计数器：{this.state.count}

)
}

}

<h2>表单处理</h2>
<h3>受控组件</h3>

HTML 中的表单元素是可输入的，也就是有自己的可变状态
而，React中可变状态通常保存在 state 中，并且只能通过 setState()方法来修改
React 将state 与表单元素值value绑定到一起，由state的值来控制表单元素的值
受控组件：其值收到React控制的表单元素

<p style="color:red">步骤：</p>

1.在state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2.给表单元素绑定 change事件，将表单元素的值设置为 state的值（控制表单元素值的变化）
state = {txt:''}
<input type="text" value={this.state.txt} onChange={e=>this.setState({txt:e.target.value})}
/>

<h4>多表单元素优化</h4>
<p>使用一个事件处理程序同时处理多个表单元素</p>

//多表单元素优化步骤：
//1.给表单元素添加name属性，名称与state 相同

//2.根据表单元素类型获取对应值
const value = target.type ==="checkbox"?target.checked:target.value

//3.在change 事件处理程序中通过[name]设置对应state
this.setState({
[name]:value
})

// 受控组件示例
class App extends React.Component{
state={
txt:'',
content:'',
city:'bj',
isChecked:false
}
//事件处理程序
handleChange = 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.handleChange}/>
            <br/>
            {/* 富文本 */}
            <textarea name="content" value={this.state.content} onChange={this.handleChange}></textarea>
            <br/>
            {/* 下拉框*/}
            <select name="city"  value={this.state.city} onChange={this.handleChange}>
               <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.handleChange}/>
        </div>
       
    )
}

}

<h3>非受控组件(知道就行）</h3>
<p>借用于ref，使用原生 DOM 方式来获取表单元素值</p>

ref 的作用：获取DOM 或组件

<p style="color:red">步骤：</p>
<p>1.调用React.createRef()方法创建一个ref对象</p>

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

// 非受控组件示例
class App extends React.Component{
constructor(){
super()
//创建ref
this.txtRef = React.createRef()
}
//获取文本框的值
getTxt = () =>{
console.log('文本框的值为：',this.txtRef.current.value)
}
render(){
return(

        </div>
       
    )
}

}

<p>2.将创建好的ref 对象添加到文本框中</p>

```

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

``` console.log(this.txtRef.current.value) ```

总结

``` 1.组件的两种创建方式：函数组件和类组件 2.无状态（函数）组件，负责静态结构展示 3.有状态（类）组件，负责更新UI，让页面动起来 4.绑定事件注意 this 指向问题 5.推荐使用受控组件来处理表单 6.完全利用了js语言的能力创建组件，这是react 的思想 ```