React - React 组件基础

React组件介绍

• 组件是 React 的一等公民，使用 React 就是在用组件
• 组件表示页面中的部分功能
• 组合多个组件实现完整的页面功能
• 特点：可复用、独立、可组合

组件的创建方式

1. 函数创建组件

• 函数组件：使用JS的函数创建组件
• 函数名称必须以大写字母开头
• 函数组件必须有返回值，表示该组件的结构
• 如果返回值为null，表示不渲染任何内容

编写函数组件

function Hello() {
    return (
        <div>这是第一个函数组件</div>
    )
}

利用 ReactDOM.render() 进行渲染

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

2. 类组件

• 使用 ES6 语法的 class 创建的组件
• 类名称也必须要大写字母开头
• 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或者属性
• 类组件必须提供 render 方法
• render 方法中必须要有 return返回值

1. 创建class类，继承 React.Component，在里面提供 render 方法，在 return 里面返回内容

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

2. 通过 ReactDOM 进行渲染

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

抽离成单独的JS文件

组件作为一个独立的个体，一般都会放到一个单独的JS文件中

1. 创建 JS 文件
2. 在 js 文件中导入React，创建组件，在 js 文件中导出

// Hello.js
import React from 'react'

export default class extends React.Component {
    render(){
        return (
            <div>单独抽离出来的 Hello</div>
        )
    }
}

• 在 index.js 中导入 Hello 组件，渲染到页面

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

React事件处理

事件绑定

• React事件绑定语法与DOM事件语法相似
• 语法：on+事件名称=事件处理函数，比如 onClick = function(){}
• 注意：React事件采用驼峰命名法

export default class extends React.Component {
    clickHandle(e){
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

• 在React中绑定事件与原生很类似
• 需要注意点在于，在React绑定事件需要遵循驼峰命名法
• 类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

事件对象

• 可以通过事件处理函数的参数获取到事件对象
• React中的事件对象叫做：合成事件
• 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
• 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
• 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

export default class extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我</button></div>
        )
    }
}

支持的事件

• Clipboard Events 剪切板事件

  • 事件名 ：onCopy、 onCut、 onPaste
  • 属性 ：DOMDataTransfer clipboardData

• compositionEvent 复合事件

  • 事件名： onCompositionEnd、 onCompositionStart、 onCompositionUpdate
  • 属性： string data

• Keyboard Events 键盘事件

  • 事件名：onKeyDown、 onKeyPress、 onKeyUp
  • 属性： 例如 number keyCode

• Focus Events 焦点事件 （这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素）

  • 事件名： onFocus、 onBlur
  • 属性： DOMEventTarget relatedTarget

• Form Events 表单事件

  • 事件名： onChange、 onInput、 onInvalid、 onSubmit

…

有状态组件和无状态组件

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

State和SetState

state基本使用

• 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过 this.state 来获取状态

export default class extends React.Component {
    constructor(){
        super()
        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}

setState() 修改状态

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

export default class extends React.Component {
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>
                <div>计数器 :{this.state.count}</div>
                <button onClick={() => {
                     this.setState({
            	 		count: this.state.count+1
           			  })   
                }}>+1</button>
            </div>
        )
    }
}

• 修改state里面的值我们需要通过 this.setState() 来进行修改
• React底层会有监听，一旦我们调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件

抽取事件处理函数

• 当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this

• 在 JSX 中我们写的事件处理函数可以找到 this，原因在于在 JSX 中我们利用箭头函数，箭头函数是不会绑定this，所以会向外一层去寻找，外层是 render 方法，在 render 方法里面的 this 刚好指向的是当前实例对象

事件绑定this指向

箭头函数

• 利用箭头函数自身不绑定this的特点
  

利用bind方法

利用原型 bind 方法是可以更改函数里面 this 的指向的，所以我们可以在构造中调用 bind 方法，然后把返回的值赋值给我们的函数即可

class App extends React.Component {
  constructor() {
    super()
	...
    // 通过bind方法改变了当前函数中this的指向
    this.onIncrement = this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() {
    ...
  }

  render() {
    ...
  }
}

class的实例方法

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

  // 事件处理程序
  onIncrement = () => {
    console.log('事件处理程序中的this：', this)
    this.setState({
      count: this.state.count + 1
    })
  }

推荐：使用class的实例方法，也是依赖箭头函数不绑定this的原因

表单处理

受控组件

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

步骤

1. 在 state 中添加一个状态，作为表单元素的 value 值
2. 给表单元素绑定 change 事件，将表单元素的值设置为 state 的值

class App extends React.Component {
    constructor(){
        super()
        this.inputChange = this.inputChange.bind(this)
    }
    state = {
        txt : ''
    }
    inputChange(e){
       this.setState({
           txt: e.target.value
       })
    }
    render(){
        console.log(this.state);
        
        return (
            <div>
                {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
                <input type="text" value={this.state.txt} onChange={this.inputChange}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

多表单元素优化

• 问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
• 优化：使用一个事件处理程序同时处理多个表单元素

步骤

1. 给表单元素添加 name 属性（用来区分是哪一个表单），名称与 state 相同（用来更新数据的）
2. 根据表单内容来获取对应值
3. 在 change 事件处理程序中通过 [name] 来修改对应的 state

inputChange(e){
   let target = e.target;
   let value = target.type == 'checkbox' ? target.checked : target.value;
   this.setState({
       [e.target.name]: value
   })
}
<input type="text" value={this.state.txt} name="txt" onChange={this.inputChange}/>
<input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.inputChange}/>

非受控组件 （了解）

• 说明：借助于 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>
        )
    }
}