React组件基础

最新推荐文章于 2024-04-02 14:06:30 发布

灯光下的投影

最新推荐文章于 2024-04-02 14:06:30 发布

阅读量182

点赞数

分类专栏： React 文章标签： setState

本文链接：https://blog.csdn.net/liuyuhua666/article/details/96109764

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. React 组件介绍

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

2. React 组件的两种创建方式

使用函数创建组件
使用类创建组件

2.1 使用函数创建组件

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

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

渲染函数组件：用函数名作为组件标签名
组件标签可以是单标签也可以是双标签

function Hello() {
	return (
		<div>这是我的第一个函数组件！</div>
	) 
}
ReactDOM.render(<Hello />, root)

2.2 使用类创建组件

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

class Hello extends React.Component {
	render() {
		return <div>Hello Class Component!</div>
	} 
}
ReactDOM.render(<Hello />, root)

2.3 抽离为独立 JS 文件

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

// index.js 
import Hello from './Hello' 
// 渲染导入的Hello组件 
ReactDOM.render(<Hello />, root)

// Hello.js
import React from 'react'
class Hello extends React.Component {
	render() {
		return <div>Hello Class Component!</div>
	}
}
// 导出Hello组件
export default Hello

3. React 事件处理

事件绑定
事件对象

3.1 事件绑定

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

function App() {
	function handleClick() {
		console.log('单击事件触发了')
	}
	return (
		<button onClick={handleClick}>点我</button>
	) 
}

在类组件中绑定事件：

class App extends React.Component {
	handleClick() { 
		console.log('单击事件触发了') 
	} 
	render() {
		return ( 
		<button onClick={this.handleClick}></button> 
		) 
	} 
}

3.2 事件对象

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

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

4. 有状态组件和无状态组件

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

比如计数器案例中，点击按钮让数值加 1 。0 和 1 就是不同时刻的状态，而由 0 变为 1 就表示状态发生了变化。状态变化后，UI 也要相应的更新。React 中想要实现该功能，就要使用有状态组件来完成。

5. 组件中的 state 和 setState

state的基本使用
setState()修改状态

5.1 state的基本使用

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

class Hello extends React.Component { 
	constructor() { 
		super()
		// 初始化state
		this.state = { 
			count: 0 
		} 
	}
	render() { 
		return ( 
			<div>有状态组件</div> 
		) 
	} 
}

class Hello extends React.Component {
	// 简化语法
	state = {
		count: 0
	} 
	render() {
		return (
			<div>有状态组件</div>
		) 
	} 
}

获取状态：this.state

class Hello extends React.Component {
// 简化语法
	state= {
		count: 0
	}
	render() {
		return (
			<div>有状态组件，{this.state.count}</div>
		) 
	} 
}

状态即数据
状态是私有的，只能在组件内部使用
通过 this.state 来获取状态

5.2 setState()修改状态

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

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

5.3 从JSX 中抽离事件处理程序

JSX 中掺杂过多 JS 逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证 JSX 结构清晰

6. 事件绑定 this 指向

箭头函数
Function.prototype.bind()
class 的实例方法

你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。

1. 箭头函数

利用箭头函数自身不绑定this的特点
render() 方法中的 this 为组件实例，可以获取到 setState()

class Hello extends React.Component {
	onIncrement() {
		this.setState({ … })
	}
	render() {
		// 箭头函数中的this指向外部环境，此处为：render()方法
		return (
			<button onClick={() => this.onIncrement()}></button>
		) 
	} 
}

2. Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

class Hello extends React.Component {
	constructor() {
		super()
		this.onIncrement = this.onIncrement.bind(this) 
	}
	// ...省略 onIncrement
	render() {
		return (
			<button onClick={this.onIncrement}></button>
		) 
	} 
}

3. class 的实例方法

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

class Hello extends React.Component {
	onIncrement = () => {
		this.setState({ … })
	}
	render() {
		return (
			<button onClick={this.onIncrement}></button>
		) 
	} 
}

总结

推荐：使用class的实例方法
箭头函数
bind

7. 表单处理

受控组件
非受控组件（DOM方式）

7.1 受控组件

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

<input type="text" value={this.state.txt} />

步骤：

在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）

state = { txt: '' }
<input type="text" value={this.state.txt} />

给表单元素绑定 change 事件，将表单元素的值设置为 state 的值（控制表单元素值的变化）

state = { txt: '' }
<input type="text" value={this.state.txt}
	onChange={e => this.setState({ txt: e.target.value })}
/>

7.2 非受控组件

说明：借助于 ref，使用原生 DOM 方式来获取表单元素值
ref 的作用：获取 DOM 或组件
使用步骤：

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

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

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

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

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

Console.log(this.txtRef.current.value)

案例：评论列表:

在这里插入图片描述

需求分析:

① 渲染评论列表（列表渲染）
② 没有评论数据时渲染：暂无评论（条件渲染）
③ 获取评论信息，包括评论人和评论内容（受控组件）
④ 发表评论，更新评论列表（setState()）

实现步骤

1. 渲染评论列表
① 在 state 中初始化评论列表数据
② 使用数组的map方法遍历state中的列表数据
③ 给每个被遍历的li元素添加key属性
2. 渲染暂无评论
① 判断列表数据的长度是否为0
② 如果为0，则渲染暂无评论
3. 获取评论信息
① 使用受控组件方式处理表单元素
4. 发表评论
① 给按钮绑定单击事件
② 在事件处理程序中，通过state获取评论信息
③ 将评论信息添加到state中，并调用 setState() 方法更新state
④ 边界情况：清空文本框
⑤ 边界情况：非空判断
代码：
CommentForm.js:

import React from 'react'

// 评论表单组件：
export default class CommentForm extends React.Component {
  state = {
    // 评论人
    name: '',
    // 评论内容：
    content: ''
  }

  handleNameChange = e => {
    this.setState({
      name: e.target.value
    })
  }

  handleContentChange = e => {
    this.setState({
      content: e.target.value
    })
  }

  // 发表评论
  addComment = () => {
    const { name, content } = this.state
    // 非空校验：
    if (name.trim() === '' || content.trim() === '') {
      return
    }

    // console.log('CommentForm：', this.props)
    this.props.updateComment(name, content)

    // 清空文本框
    this.setState({
      name: '',
      content: ''
    })
  }

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="评论人"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
        <br />
        <textarea
          cols="30"
          rows="10"
          placeholder="评论内容"
          value={this.state.content}
          onChange={this.handleContentChange}
        />
        <br />
        <button onClick={this.addComment}>发表评论</button>
      </div>
    )
  }
}

CommentList.js:

import React from 'react'

// 通过 props 接收list数据：
export default function CommentList(props) {
  console.log('commentlist', props.list)
  return (
    <ul>
      {props.list.map(item => (
        <li key={item.id}>
          <h3>评论人：{item.name}</h3>
          <p>评论内容：{item.content}</p>
        </li>
      ))}
    </ul>
  )
}

index.js:

import React from 'react'
import ReactDOM from 'react-dom'


// 导入两个子组件：
import CommentList from './components/CommentList'
import CommentForm from './components/CommentForm'

// 父组件
class Comment extends React.Component {
  state = {
    list: [
      { id: 1, name: 'jack', content: 'rose, you j, i j' },
      { id: 2, name: 'rose', content: 'jack, 风太大听不见' },
      { id: 3, name: 'tom', content: '????, 你们扔垃圾吗？' }
    ]
  }

  // 提供修改状态的方法
  updateComment = (name, content) => {
    this.setState({
      list: [...this.state.list, { id: Math.random(), name, content }]
    })
  }

  render() {
    return (
      <div className="comment">
        <CommentForm updateComment={this.updateComment} />
        <div>
          {/* 传递list数据： */}
          <CommentList list={this.state.list} />
        </div>
      </div>
    )
  }
}

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