React学习[二]

最新推荐文章于 2024-05-18 21:57:13 发布
最新推荐文章于 2024-05-18 21:57:13 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38393535/article/details/131235840
版权

React学习[二]

React组件介绍

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

组件的创建方式

使用函数创建组件

  • 函数组件：使用JS的函数创建组件
  • 约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的React元素
  • 约定2：函数组件必须有返回值，表示该组件的结构
  • 如果返回值为null，表示不渲染任何内容
function Hello(){
	return (
		<div>第一个函数组件</div>
	)
}

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

// function Hello() {
//   return (
//     <div> 第一个组件 </div>
//   )
// }
// 箭头函数
const Hello = () => <div> 第一个函数组件 </div>
// 渲染组件
ReactDOM.render(< Hello />, document.getElementById('root'))

使用类创建组件

类组件：使用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文件中。
步骤：

  • 创建Hellojs
  • 在Hello.js中导入React
  • 创建组件(函数或类)
  • 在Hello.js中导出该组件
  • 在index.js中导入Hello组件
  • 渲染组件
// Hello.js
import React from 'react'
class Hello extends React.Component {
	render (){
		return <div>Hello Class Component!</div>
	}
}
// 导出Hello组件
export default Hello

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

事件对象

事件绑定

语法：on+事件名称={事件处理程序}，比如onClick = {()=>{}}
注意：React事件采用驼峰命名法，比如：onMouseEhter、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>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

事件对象

  • 可以通过事件处理函数的参数获取到事件对象
  • React中的事件对象叫做：合成事件
  • 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
  • 除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
  • 如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取
// 类事件
class App extends React.Component {
  // 事件处理程序
  handleClick(e) {
    e.preventDefault()
    console.log('a标签的单击事件触发了')
  }
  render() {
    return (
      <a href="http://itcast.cn/" onClick={this.handleClick}>传智播客</a>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

有状态组件和无状态组件

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

state的基本使用

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

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

  // 简化语法
  state = {
    count: 0
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

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

setState()修改状态

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

/* 
  setState()的基本使用
*/
class App extends React.Component {
  // 简化语法
  state = {
    count: 0
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
          // 错误演示
          // this.state.count += 1
        }}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

事件绑定this指向问题

问题：
使用JSX抽离单独的程序处理时，this为undefined

class App extends React.Component {
  // 简化语法
  state = {
    count: 0
  }
  // 事件处理程序
  onIncrement() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={this.onIncrement}>+1</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

箭头函数

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

class App extends React.Component {
  // 简化语法
  state = {
    count: 0
  }
  // 事件处理程序
  onIncrement() {
    this.setState({ // 这里的this指向下面箭头函数的this
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <h1> 计数器： {this.state.count} </h1>
        <button onClick={() => this.onIncrement()} > +1 </button>
        {/* () => this.onIncrement()才是真正的事件处理程序
          这里的this就是所求实例
        */}
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

Function.prototype.bind()

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

class App extends React.Component {
  // 简化语法
  state = {
    count: 0
  }
  constructor() {
    super()
    this.onIncrement = this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() {
    this.setState({ // 这里的this指向下面箭头函数的this
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <h1> 计数器： {this.state.count} </h1>
        <button onClick={this.onIncrement} > +1 </button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

class实例方法

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

class App extends React.Component {
  // 简化语法
  state = {
    count: 0
  }
  // 事件处理程序
  onIncrement = () => {
    this.setState({ // 这里的this指向下面箭头函数的this
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <h1> 计数器： {this.state.count} </h1>
        <button onClick={this.onIncrement} > +1 </button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

表单处理

受控组件

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

  • 在state中添加一个状态，作为表单元素的value值(控制表单元素值的来源)
  • 给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)
class App extends React.Component {
  // 简化语法
  state = {
    txt: ''
  }
  // 事件处理程序
  handleChange = e => {
    this.setState({ // 这里的this指向下面箭头函数的this
      txt: e.target.value
    })
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

文本框、富文本框、下拉框操作value属性
复选框操作checked属性

class App extends React.Component {
  // 简化语法
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }
  // 事件处理程序
  handleChange = e => {
    this.setState({ // 这里的this指向下面箭头函数的this
      txt: e.target.value
    })
  }
  // 处理富文本框的变化
  handleContentChange = e => {
    this.setState({
      content: e.target.value
    })
  }
  // 处理下拉框的变化
  handleCityChange = e => {
    this.setState({
      city: e.target.value
    })
  }
  // 处理复选框的变化
  handleCheckedChange = e => {
    this.setState({
      isChecked: e.target.checked
    })
  }
  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" value={this.state.txt} onChange={this.handleChange} />
        <br />

        {/* 富文本框 */}
        <textarea value={this.state.content} onChange={this.handleContentChange}></textarea>
        <br />

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleCityChange}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="hz">杭州</option>
        </select>
        <br />

        {/* 复选框 */}
        <input type="checkbox" checked={this.state.isChecked} onChange={this.handleCheckedChange} />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

表单元素优化

问题：每个表单元素都有一个单独的事件处理程序处理太繁琐
优化：使用一个事件处理程序同时处理多个表单元素
多表单元素优化步骤：

  1. 给表单元素添加name属性，名称与state相同
  2. 根据表单元素类型获取对应值
  3. 在change事件处理程序中通过[name]来修改对应的state
class App extends React.Component {
  // 简化语法
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }
  // 事件处理程序
  handleForm = e => {
    // 获取当前DOM对象
    const target = e.target
    // 根据类型获取值
    const value = target.type === 'checkbox' ? target.checked : target.value
    // 获取name
    const name = target.name
    this.setState({ // 这里的this指向下面箭头函数的this
      [name]: value
    })
  }
  render() {
    return (
      <div>
        {/* 文本框 */}
        <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm} />
        <br />

        {/* 富文本框 */}
        <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
        <br />
        {/* 下拉框 */}
        <select name="city" value={this.state.city} onChange={this.handleForm}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="hz">杭州</option>
        </select>
        <br />

        {/* 复选框 */}
        <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleForm} />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

非受控组件

说明：借助于ref，使用原生DOM方式来获取表单元素值；
ref的作用：获取DOM或组件。
使用步骤：
1.调用React.createRef()方法创建一个 ref对象

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

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

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

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

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

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>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

发表评论案例

需求：

  • 渲染评论列表(列表渲染)
    ①在state中初始化评论列表数据
    ②使用数组的map方法遍历state中的列表数据
    ③给每个被遍历的li元素添加key属性
  • 没有评论数据时渲染：暂无评论(条件渲染)
    ①判断列表数据的长度是否为0
    ②如果为0，则渲染暂无评论
  • 获取评论信息，包括评论人和评论内容(受控组件)
    ①使用受控组件方式处理表单元素
  • 发表评论，更新评论列表setState()
    ①给按钮绑定单击事件
    ②在事件处理程序中，通过state获取评论信息
    ③将评论信息添加到state中,并调用setState()方法更新state
    ④边界情况：清空文本框
    ⑤边界情况：非空判断
class Hello extends React.Component {
  // 初始化状态
  state = {
    comments: [
      /*  { id: 1, name: 'jack', content: '沙发! ! !' },
       { id: 2, name: 'rose', content: '板凳' },*/
      { id: 3, name: 'tom', content: '楼主好人' }
    ],
    // 评论人
    userName: '',
    //  评论内容
    userContent: ''
  }
  // 渲染评论列表
  renderList() {
    const { comments } = this.state
    if (comments.length === 0) {
      return <div className="no-comment">暂无评论， 快去评论吧~</div>
    }
    return (
      <ul> {
        comments.map(
          item => (
            <li key={item.id}>
              <h3>评论人: {item.name}</h3>
              <p>评论内容: {item.content}</p>
            </li>
          )
        )}
      </ul>
    )
  }
  // 处理表单元素值
  handleForm = e => {
    const { value, name } = e.target
    this.setState({
      [name]: value
    })
  }
  // 发表评论的处理程序
  addComments = () => {
    const { comments, userName, userContent } = this.state
    // console.log(userName, userContent)
    //非空校验
    if (userName.trim() === '' || userContent.trim() === '') {
      alert('请输入评论人和评论内容')
      return
    }
    const newComments = [{
      id: Math.random,
      name: userName,
      content: userContent
    }, ...comments]
    // console.log(newComments)
    //文本框的值如何清空? 要清空文本框只需要将其对应的state清空即可
    this.setState({
      comments: newComments,
      userName: '',
      userContent: ''
    })
  }
  render() {
    const { userName, userContent } = this.state
    return (
      <div>
        <div className="app">
          <div>
            <input
              className="user"
              type="text"
              placeholder="请输入评论"
              value={userName}
              name="userName"
              onChange={this.handleForm}
            />
            <br />
            <textarea
              className="content"
              cols="30" rows="10"
              placeholder="请输入评论内容"
              value={userContent}
              name="userContent"
              onChange={this.handleForm}
            />
            <br />
            <button onClick={this.addComments}>发表评论</button>
          </div>
          {/* 通过条件渲染决定渲染什么评论 */}
          {this.renderList()}
        </div>
      </div>
    )
  }
}
// 渲染组件
ReactDOM.render(<Hello />, document.getElementById('root'))
七更醉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习手册.zip
07-17
前端学习必备，React现市面上前端主流技术，仅供学习参考使用。
React学习二（组件详解）
qq_44872688的博客
03-12 1451
文章目录一、React数据流二、组件的三大特性1、属性（props）（1）React Props默认值与标签属性限制（2）应用-React组件切分与提取2、状态（state）（1）state的定义（2）更新状态3、生命周期（1）挂载（2）数据更新过程（3）卸载 一、React数据流       在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。       state 与
React学习（二）
weixin_47017090的博客
05-30 611
React组件基础1.React组件的两种创建方式1.1使用函数创建组件1.2使用类创建组件1.3抽离为独立JS文件2.React事件处理2.1事件绑定2.2事件对象 1.React组件的两种创建方式 1.使用函数创建组件 2.使用类创建组件 1.1使用函数创建组件 ·函数组件：使用JS的函数（或箭头函数）创建的组件 ·函数名称必须以大写字母开头 ·函数组件必须有返回值，表示该组件的结构 ·如果返回值为null，表示不渲染任何内容 ·渲染函数组件：用函数名作为组件标签名(组件标签可以是单标签也可以是双标签）
React学习路线
qq_68575975的博客
02-14 651
解决：定义一个state:loginflag:false。用 Navigate组件在render函数里。请求成功把loginflag改为true。实例一、简易的按钮增加和减少。问题一、登录成功页面跳转。问题二、点击子菜单路由跳转。入口文件index.js。解决:使用链式链接导航。
React学习笔记
EUEY的博客
03-26 1770
React学习笔记（持续更新） 一、基础 1.概念 React是用于构建用户界面的JavaScript库（只关注视） 2.特点 声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。 3.高效原因 使用虚拟(virtual)DOM,不总是直接操作页面真
React学习笔记（二）
qq_45243719的博客
02-05 1766
{show && <div>是否展示
react学习小结
tongtianjianmu的博客
04-26 1314
1.什么是react? 一个用于构建JavaScript的库 2.react特点? -声明式 -组件式 3.掌握react的基本使用? react:18.0.0和之前版本的使用方法不一样,下面使用的是17.0.0版本的 <div id="app"></div> <script src="./node_modules/react/umd/react.development.js"></script>...
React 学习总结
qq_31151699的博客
01-07 911
React 初学习总结
React框架的学习
Gentman_Dylan的博客
03-01 1769
前端-React框架一、环境搭建使用 create-react-app 快速构建 React 开发环境二、react目录以及文件目录结构组件基础模板三、React的知识点1.JSX语法自定义属性样式数组2.生命周期3.事件处理阻止默认行为this指向函数传参4.Context（上下文）API5.组件API设置状态:setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态
react学习小记
wajueju的博客
08-05 1220
react
React框架学习笔记
qq_45192089的博客
05-07 2870
React系列知识点一、项目初始化1、react-script2、TSX3、【组件化】配置React的CSS模组（1）使用React最大的优势是模组化（CSS module）：（2）TS的定义声明（3）css类型声明（4）CSS in JS（5）把css转化为了js对象，那么typescript也可以实现css的类型3、Ant Design（UI框架）二、 react-router-dom1、什么是SPA（单页网站应用）？2、什么是路由，什么是虚拟路由？(1) React-router(2) React-r
React Native 学习二源码
09-17
React Native 学习二源码 电商项目初步搭建， version 0.44.3，只提供学习，还不具备实际效果，慎重下载！谢谢观赏！
React学习手册完整版带目录.zip
06-25
React完整版的学习手册带目录
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
【React】React的懒加载组件lazy和Suspense
fangyuan__的博客
05-13 252
在一个多路由项目中，页面加载时，所有的路由组件都会被加载如果我们有很多个路由组件，但是用户只点击了几个，这就会有很大的消耗，因此我们需要做懒加载处理，我们点击哪个时，才去加载哪一个而React当然想到了这一点，给我们提供了LazyLoad。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 180
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 622
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
React18
m0_71534259的博客
05-16 1289
/ 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）// 3. 把组件中用到的状态或者回调return出去（以对象或者数组）
React 中的组件提升和 Context 的使用方式
hawk2014bj的博客
05-18 250
在项目的开发中，何时使用状态提升，何时使用上下文，我们需要根据具体需求，以及组件的复杂性。当只有少数几个组件需要访问状态，并且这些组件关系密切（如父子或兄弟组件）时使用。保持数据流简单和明确，使得追踪和调试数据流通过组件的方式更加容易。状态提升的好处是简单、方便，但是需要层层传递，如果结构复杂就显得比较混乱。对应使用上下文，可以应用在以下几种场景当状态需要被应用内不同层级的许多组件访问时。用于可以被视为“全局”的数据，如主题、用户设置、身份验证数据等。
react学习手册第二版 pdf
12-09
"react学习手册第二版"是一本关于React框架学习的PDF教程。React是一种用于构建用户界面的JavaScript库，它可以帮助开发者构建可复用的UI组件。该学习手册提供了对React的详细介绍和相关技术的解释。 这本学习手册...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值