其他分享
首页 > 其他分享> > React全家桶详细讲解-图文并茂

React全家桶详细讲解-图文并茂

作者：互联网

如果你是小白，这套资料可以帮你成为大牛，如果你有丰富开发经验，这套资料可以帮你突破瓶颈
2022web全套视频教程前端架构 H5 vue node 小程序 视频+资料+代码+面试题.

文章目录

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、React-表单处理

受控组件

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

使用步骤

多表单元素优化

示例：

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}/>

非受控组件

二、React-组件综合案例

需求分析

在这里插入图片描述

搭建任务的模板

渲染列表

添加任务

addTodo用于添加一个todo，接收的参数是todo对象,将attTodo传递给heder

import React, { Component } from 'react'
import './index.css'
export default class Header extends Component {

  // react生命周期-一般用在进入页面后，数据初始化，这种情况下和vue中的created挺相似的
  componentDidMount() {
    this.input.focus()
  }

  // input输入框
  handleKeyUp = (event)=> {
    // 结构赋值
    const {keyCode,target} = event
    // 判断是否是enter按键
    if(keyCode !== 13) return
    // 判断是否是空对象
    if (target.value.trim() === ''){
      alert('输入的不能为空')
      return // 如果不return，有空对象那么提示完又继续执行了，没有达到一个拦截作用
    }
    // 准备一个todo对象
    const todoobj = {id:new Date().getTime(),name:target.value,done:false}
    // 父子组件传值
    this.props.addTodo(todoobj)
    // 情况输入的字符串
    target.value = ''
  }

  render() {
    return (
      <div className="todo-header">
      <input ref={(input)=> this.input = input}  onKeyUp = {this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
    )
  }
}

删除任务

给list 绑定一个delete的事件
在这里插入图片描述

在这里插入图片描述

三、React-组件进阶

组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整
的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要
共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组
件通讯

组件的props

基本使用

接收数据：函数组件通过 参数 props接收数据，类组件通过 this.props接收数据

  1. 函数组件：

    function Hello(props) {
    return (

    接收到数据： {props.name} ) }

  2. 类组件：

    class Hello extends React.Component {
    render() {
    return {

    接收到数据： this.props.age} } } }

四、react-组件通讯的三种方式

react-父组件传递数据给子组件

react-子组件传递数据给父组件

在这里插入图片描述
子组件通过props 调用回调函数

在这里插入图片描述

react-兄弟组件传递

五、react-生命周期

  1. 概述

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等
组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
钩子函数的作用：为开发人员在不同阶段操作组件提供了时机

  1. 生命周期阶段

在这里插入图片描述

创建时（挂载阶段）

在这里插入图片描述

更新时

在这里插入图片描述

卸载时

执行时机：组件从页面中消失
作用：用来做清理操作
在这里插入图片描述

完整生命周期钩子函数

在这里插入图片描述
getDerivedStateFromProps()

shouldComponentUpdate()

getSnapshotBeforeUpdate()

六、React-原理

更新数据

如下面在 changeContent 方法中，首先修改 nam 属性的值，然后根据此值的变化，设置 color 属性的
值
发现结果并非预想中的一样，原因就在于 setState 方法是异步的

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
  constructor(props) {
    super(props)
    this.changeContent = this.changeContent.bind(this)
    this.state = {
      name: 'yhb',
      age: 20,
      color: 'red'
    }
  }
  changeContent() {
    this.setState((state, props) => {
      return {
        name: 'onlifes'
      }
    })
    if (this.state.name === 'onlifes') {
      this.setState({
        color: 'blue'
      })
    }
  }
  render() {
    return (
      <div>
        <h1 style={{ 'color': this.state.color }}>{this.state.name}</h1>
        <button onClick={this.changeContent}>change</button>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#root'))

推荐语法

在这里插入图片描述

使用这种方法，可以保证拿到 state 或者 props 中的最新值，就可以解决上面的问题

changeContent () {
	this.setState((state, props) => {
	return {
	name: 'onlifes'
	}
})
this.setState((state, props) => {
	return {
	color: 'blue'
	}
	})
}

第二个参数

在这里插入图片描述
使用回调函数的方式，也可以完成上面的功能

changeContent () {
	this.setState((state, props) => {
	return {
	name: 'onlifes'
  }
}, () => {
	if (this.state.name === 'onlifes') {
	this.setState({
	color: 'blue'
		})
	}
})
}

JSX 的转化过程

在这里插入图片描述

七、React-路由的介绍

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户
体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路
由应运而生。

路由的基本使用

react路由-常用组件说明

  1. 两种常用的Router： HashRouter和BrowserRouter
  2. HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
  3. 推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
  1. path属性：路由规则，这里需要跟Link组件里面to属性的值一致
  2. component属性：展示的组件
  3. Route写在哪，渲染出来的组件就在哪

八、虚拟DOM和react-DIFF算法

虚拟DOM

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容
在这里插入图片描述

DIFF 算法

执行过程

在这里插入图片描述
示例：

标签：react,return,图文并茂,讲解,React,state,props,组件
来源： https://blog.csdn.net/web18296061989/article/details/123037176