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>
        )
    }
}
  1. 通过 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 剪切板事件

    • 事件名 :onCopyonCutonPaste
    • 属性 :DOMDataTransfer clipboardData
  • compositionEvent 复合事件

    • 事件名: onCompositionEndonCompositionStartonCompositionUpdate
    • 属性: string data
  • Keyboard Events 键盘事件

    • 事件名:onKeyDownonKeyPressonKeyUp
    • 属性: 例如 number keyCode
  • Focus Events 焦点事件 (这些焦点事件在 React DOM 上的所有元素都有效,不只是表单元素)

    • 事件名: onFocusonBlur
    • 属性: DOMEventTarget relatedTarget
  • Form Events 表单事件

    • 事件名: onChangeonInputonInvalidonSubmit

有状态组件和无状态组件

  • 函数组件又叫做 无状态组件,类组件又叫做 有状态组件
  • 状态(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的特点
    React - React 组件

利用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的原因

上一篇:React - React 组件进阶


下一篇:ps制作黑白素描画