React学习笔记-组件基础

Hi,我是赵猛,今天整理一下React学习中的一些笔记。

一、组件基本介绍

组件是React中最基本的内容，使用React就是在使用组件
组件表示页面中的部分功能
多个组件可以实现完整的页面功能
组件特点：可复用，独立，可组合

二、React创建组件的两种方式

函数组件

函数组件：使用JS的函数或者箭头函数创建的组件

为了区分普通标签，函数组件的名称必须大写字母开头
函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容
使用函数创建组件

function Hello () {
    
    
    return (
    	<div>这是我的函数组件</div>
    )
}

使用箭头函数创建组件

const Hello = () => <div>这是一个函数组件</div>

使用组件

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

类与继承

class基本语法

在ES6之前通过构造函数创建对象
在 ES6 中新增了一个关键字 class,类和构造函数类似，用于创建对象
- 类与对象的区别
- 类：指的是一类的事物，是个概念，比如车手机水杯等
- 对象：一个具体的事物，有具体的特征和行为，比如一个手机，我的手机等，类可以创建出来对象。
类创建对象的基本语法
- 基本语法class 类名{}
- 构造函数constructor的用法，创建对象
- 在类中提供方法，直接提供即可
- 在类中不需要使用,分隔

extends 实现继承

extends 基本使用
类可以使用它继承的类中所有的成员（属性和方法）
类中可以提供自己的属性和方法
注意：如果想要给类中新增属性，必须先调用 super 方法

类组件

类组件：使用ES6的class语法创建组件

约定1：类组件的名称必须是大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供render方法
约定4：render方法必须有返回值,表示该组件的结构
定义组件

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

使用组件

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

将组件提取到单独的js文件中

思考：项目中的组件多了之后，该如何组织这些组件呢？

选择一：将所有组件放在同一个JS文件中
选择二：将每个组件放到单独的JS文件中
组件作为一个独立的个体，一般都会放到一个单独的 JS 文件中
实现方式：

创建Hello.js
创建组件（函数或类）
在 Hello.js 中导出该组件
在 index.js 中导入 Hello 组件
渲染组件

有状态组件和无状态组件

函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提：基于hooks之前说的】
类组件又叫做有状态组件 类组件可以自己提供数据，组件内部的状态（数据如果发生了改变，内容会自动的更新）数据驱动视图
状态（state）即组件的私有数据，当组件的状态发生了改变，页面结构也就发生了改变。
函数组件是没有状态的，只负责页面的展示（静态，不会发生变化）性能比较高
类组件有自己的状态，负责更新UI，只要类组件的数据发生了改变，UI就会发生更新。
在复杂的项目中，一般都是由函数组件和类组件共同配合来完成的。【增加了使用者的负担，所以后来有了hooks】

比如计数器案例，点击按钮让数值+1， 0和1就是不同时刻的状态，当状态从0变成1之后，UI也要跟着发生变化。React想要实现这种功能，就需要使用有状态组件来完成。

类组件的状态

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

class Hello extends React.Component {
    
    
  constructor() {
    
    
    super()
    // 组件通过state提供数据
    this.state = {
    
    
      msg: 'hello react'
    }
  }
  render() {
    
    
    return <div>state中的数据--{
    
    this.state.msg}</div>
  }
}

简洁的语法

class Hello extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }
  render() {
    
    
    return <div>state中的数据--{
    
    this.state.msg}</div>
  }
}

三、事件处理

注册事件

React注册事件与DOM的事件语法非常像

语法on+事件名=｛事件处理程序｝ 比如onClick={this.handleClick}

注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

class App extends React.Component {
    
    
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.handleClick}>点我</button>
      </div>
    )
  }

  handleClick() {
    
    
    console.log('点击事件触发了')
  }
}

事件对象

可以通过事件处理程序的参数获取到事件对象

function handleClick(e) {
    
    
    e.preventDefault()
    console.log('事件对象', e)
}
<a onClick={
    
    this.handleClick}>点我，不会跳转页面</a>

this指向问题

事件处理程序中的this指向的是undefined
render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题

class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }
  handleClick() {
    
    
    console.log(this.state.msg)
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.handleClick}>点我</button>
      </div>
    )
  }
}

this指向问题解决方案

方案1：箭头函数
方案2：bind修改this指向
方案3：类实例方法

在render中使用箭头函数

箭头函数的特点：自身没有this，访问的是外部的this
方式1：


class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    () => {
    
     console.log(this.state.msg) }>点我</button>
      </div>
    )
  }
}

缺点：会把大量的js处理逻辑放到JSX中，将来不容易维护

方式2

class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }
  handleClick() {
    
    
    console.log(this.state.msg)
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    () => {
    
    this.handleClick()}}>点我</button>
      </div>
    )
  }
}

缺点：把大量的js逻辑写在了JSX结构中，不好维护

解决方案2：使用bind

class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }
  handleClick() {
    
    
    console.log(this.state.msg)
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

或者

class App extends React.Component {
    
    
  constructor() {
    
    
  	super()
    this.handleClick = this.handleClick.bind(this)
  }
  state = {
    
    
    msg: 'hello react'
  }
  handleClick() {
    
    
    console.log(this.state.msg)
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.handleClick}>点我</button>
      </div>
    )
  }
}

解决方案3：class实例方法

class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }

  handleClick = () => {
    
    
    console.log(this.state.msg)
  }
  render() {
    
    
    return (
      <div>
        <button onClick={
    
    this.handleClick}>点我</button>
      </div>
    )
  }
}

注意：这个语法是试验性的语法，但是有babel的转义，所以没有任何问题

setState修改状态

组件中的状态是可变的
语法this.setState({要修改的数据})
注意：不要直接修改state中的值，必须通过this.setState()方法进行修改
setState的作用

修改state
更新UI

思想：数据驱动视图

class App extends React.Component {
    
    
 state = {
    
    
   count: 1
 }
 handleClick() {
    
    
   this.setState({
    
    
     count: this.state.count + 1
   })
 }
 render() {
    
    
   return (
     <div>
       <p>次数: {
    
    this.state.count}</p>
       <button onClick={
    
    this.handleClick.bind(this)}>点我+1</button>
     </div>
   )
 }
}

react中核心理念：状态不可变
- 不要直接修改react中state的值，而是提供新的值
- 直接修改react中state的值，组件并不会更新

state = {
    
    
  count: 0,
  list: []
}
// 直接修改值的操作
this.state.count++
this.state.list.push('a')

// 创建新的值的操作
this.setState({
    
    
    count: this.state.count + 1,
    list: [...this.state.list, 'b']
})

四、表单处理

我们在开发过程中，经常需要操作表单元素，比如获取表单的值或者是设置表单的值

react中处理表单元素有两种方式：

受控组件
非受控组件（DOM操作）

受控组件基本概念

HTML中表单元素是可输入的，即表单用户并维护着自己的可变状态（value）。
但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。
React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
受控组件：value值受到了react控制的表单元素

受控组件使用步骤

在state中添加一个状态，作为表单元素的value值（控制表单元素的值）
给表单元素添加change事件，设置state的值为表单元素的值（控制值的变化）

class App extends React.Component {
    
    
  state = {
    
    
    msg: 'hello react'
  }

  handleChange = (e) => {
    
    
    this.setState({
    
    
      msg: e.target.value
    })
  }

  render() {
    
    
    return (
      <div>
        <input type="text" value={
    
    this.state.msg} onChange={
    
    this.handleChange}/>
      </div>
    )
  }
}

常见的受控组件

文本框、文本域、下拉框（操作value属性）
复选框（操作checked属性）

class App extends React.Component {
    
    
  state = {
    
    
    usernmae: '',
    desc: '',
    city: "2",
    isSingle: true
  }
 
  handleName = e => {
    
    
    this.setState({
    
    
      name: e.target.value
    })
  }
  handleDesc = e => {
    
    
    this.setState({
    
    
      desc: e.target.value
    })
  }
  handleCity = e => {
    
    
    this.setState({
    
    
      city: e.target.value
    })
  }
  handleSingle = e => {
    
    
    this.setState({
    
    
      isSingle: e.target.checked
    })
  }

  render() {
    
    
    return (
      <div>
        姓名：<input type="text" value={
    
    this.state.username} onChange={
    
    this.handleName}/>
        <br/>
        描述：<textarea value={
    
    this.state.desc} onChange={
    
    this.handleDesc}></textarea>
        <br/>
        城市：<select value={
    
    this.state.city} onChange={
    
    this.handleCity}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br/>
        是否单身：<input type="checkbox" checked={
    
    this.state.isSingle} onChange={
    
    this.handleSingle}/>
      </div>
    )
  }
}

多表单元素的优化

问题：每个表单元素都需要一个单独的事件处理程序，处理太繁琐

优化：使用一个事件处理程序处理多个表单元素

步骤

给表单元素添加name属性，名称与state属性名相同
根据表单元素类型获取对应的值
在事件处理程序中通过[name]修改对应的state

class App extends React.Component {
    
    
  state = {
    
    
    username: '',
    desc: '',
    city: "2",
    isSingle: true
  }
 
  handleChange = e => {
    
    
    let {
    
    name, type, value, checked} = e.target
    console.log(name, type, value, checked)
    value = type === 'checkbox' ? checked : value
    console.log(name, value)
    this.setState({
    
    
      [name]: value
    })
  }
  render() {
    
    
    return (
      <div>
        姓名：<input type="text" name="username" value={
    
    this.state.username} onChange={
    
    this.handleChange}/>
        <br/>
        描述：<textarea name="desc" value={
    
    this.state.desc} onChange={
    
    this.handleChange}></textarea>
        <br/>
        城市：<select name="city" value={
    
    this.state.city} onChange={
    
    this.handleChange}>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br/>
        是否单身：<input type="checkbox" name="isSingle" checked={
    
    this.state.isSingle} onChange={
    
    this.handleChange}/>
      </div>
    )
  }
}

非受控组件-ref

非受控组件借助于ref，使用原生DOM的方式来获取表单元素的值

使用步骤

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

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

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

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

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

handleClick = () => {
    
    
  console.log(this.txtRef.current.value)
}

非受控组件用的不多，推荐使用受控组件