day2--react--通信

最新推荐文章于 2024-07-18 15:48:23 发布

coder_66l

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量149

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/coder_66l/article/details/124028504

版权

一、react脚手架

1.定义

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TK2Xcrav-1649341640217)(img/react脚手架含义.png)]

2.前端三大脚手架

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U7yS3OLg-1649341640218)(img/前端脚手架.png)]

3.安装环境

3.1安装node

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mX3wXVN6-1649341640219)(img/安装node.png)]

3.2包管理工具（node会默认安装npm)

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-slRXcIwW-1649341640220)(img/包管理工具.png)]

3.3安装脚手架

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrU8qrFW-1649341640221)(img/安装脚手架.png)]

4.创建项目

看上图

4.1项目目录结构分析

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjiXylEV-1649341640221)(img/目录结构分析.png)]

4.2了解pwa

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeawUSJN-1649341640222)(img/了解pwa.png)]

5.什么是webpack

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ezPSBfX-1649341640223)(img/webpack是什么？.png)]
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJNGpjEE-1649341640223)(img/脚手架中的webpack.png)]

5.2脚手架中的wepack

npm eject将webpack相关的配置文件暴露出来，这个行为是不可逆的

二、组件化开发

1.组件化思想和react组件分类

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oxlgMmfq-1649341640224)(img/react组件化.png)]

2.类组件

函数式组件：里面没有this指向问题，但是没有状态

类组件：需要注意this指向，但是可以维护内部状态

import React from 'react'
// 类组件
// export default class App extends React.Component {
//   constructor() {
//     super()
//     this.state = {
//       counter: 0
//     }
//   }
//   render() {
//     return (
//       <div>
//         <h2>app组件</h2>
//         {this.state.counter}

//       </div>
//     )
//   }
// }

// 函数组件
export default function App() {
  return (
          <div>
            <h2>app组件</h2>
          </div>
        )
}

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1e7n5DNt-1649341640225)(img/类组件.png)]

3.render函数的返回值

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzMeuBnZ-1649341640225)(img/render函数的返回值.png)]

4.函数组件

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWpiO6Gq-1649341640226)(img/函数组件.png)]

三、生命周期

1.认识生命周期

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JcZXsnbf-1649341640226)(img/认识生命周期.png)]

2.生命周期函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F7NTuLFb-1649341640227)(img/生命周期函数.png)]
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwY6JaMe-1649341640227)(img/不常用的生命周期函数.png)]

四、组件之间的通信

1.1父传子–类组件，通过props传递

import React, { Component } from 'react'
class ChildCpn extends Component {
    // 没有对props处理也可以
  // 因为react在render函数之前就将props进行了以下操作
  // constructor(props) {
  //   super(props)
  //   this.props = props
  // }
  render() {
    const { name, age, height } = this.props
    return (
      <div>
        <h2>我是子组件{`姓名: ${name} 年龄:${age} 身高: ${height}`}</h2>
      </div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <div>
        <h2>我是父组件</h2>
        <hr />
        <ChildCpn name="why" age="18" height="1.88" />
      </div>
    )
  }
}

1.2父传子–函数组件，通过props传递

import React from 'react'

function ChildCpn(props) {
  const { name, age, height } = props
  return (
    <h2>我是子组件{`姓名: ${name} 年龄:${age} 身高: ${height}`}</h2>
  )
}
export default function App() {
  return (
    <div>
      <h2>父组件</h2>
      <ChildCpn name="why" age="18" height="1.88"/>
    </div>
  )
}

2.属性验证

对传过来的props的数据类型进行验证
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGzXsHqb-1649341640228)(img/属性验证.png)]

3.子传父–函数传递

父组件自定义事件来获取来自子组件的数据

子组件接受组定义事件，通过自定义事件传递数据

父组件：

import React, { Component } from 'react'
import TabCtrl from './TabCtrl'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currenIndex: 0,
      titles: ['新款', '流行', '复古']
    }
  }
  render() {
    const { currenIndex, titles } = this.state
    return (
      <div>
        <TabCtrl itemChange={(index) => this.itemClick(index)} getInfo={(info) => {this.getInfo(info)}} titles={titles} />
        <h2>{titles[currenIndex]}</h2>
      </div>
    )
  }
  itemClick(index) {
    this.setState({
      currenIndex: index
    })
  }
  getInfo(info) {
    console.log(info);
  }
}

// 子组件
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class TabCtrl extends Component {
  constructor() {
    super()
    this.state = {
      currentIndex: 0
    }
  }
  render() {
    const {titles} = this.props
    const {currentIndex} = this.state
    return (
      <div className='tab-ctrl'>
        {
          titles.map((item, index) => {
            return (
              <div className={'tab-item ' + (index === currentIndex ? 'active': '')}
                   key={item}
                   onClick={() => this.itemClick(index)}>
                <span className={index === currentIndex ? 'item-border': ''}>{item}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
  itemClick(index) {
    this.setState({
      currentIndex: index
    })
    const{itemChange} = this.props
    itemChange(index)
    const {getInfo} = this.props
    getInfo('你得到了子组件的信息')
  }
}

TabCtrl.propTypes = {
  titles: PropTypes.array.isRequired
}

4.插槽的实现

4.1通过this.props.children来实现传递

父组件

import React, { Component } from 'react'
import NavBar from './NavBar'
import NavBar2 from './NavBar2'
export default class App extends Component {
  render() {
    return (
      <div>
        <NavBar>
          <span>111</span>
          <span>222</span>
          <span>111</span>
        </NavBar>
        <NavBar2 leftSlot={<span>111</span>}
                 centerSlot={<span>222</span>}
                 rightSlot={<span>111</span>}/>
      </div>
    )
  }
}

子组件NavBar

import React, { Component } from 'react'

export default class NavBar extends Component {
  render() {
    return (
      <div className='nav-bar'>
        <div className='nav-left'>
          {this.props.children[0]}
        </div>
        <div className='nav-center'>
          {this.props.children[1]}
        </div>
        <div className='nav-right'>
          {this.props.children[2]}
        </div>
      </div>
    )
  }
}

4.2通过属性来传递jsx语句

import React, { Component } from 'react'

export default class NavBar extends Component {
  render() {
    const{leftSlot, centerSlot, rightSlot} = this.props
    return (
      <div className='nav-bar'>
        <div className='nav-left'>
          {leftSlot}
        </div>
        <div className='nav-center'>
          {centerSlot}
        </div>
        <div className='nav-right'>
          {rightSlot}
        </div>
      </div>
    )
  }
}

5.跨组件通信–类组件

props传递要经过中间层，太繁琐，所以有了context的出现
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ccy9VayY-1649341640228)(img/context来共享数据.png)]

1.创建context对象，使用React.createContext({})创建一个obj对象

2.给要得到数据的组件用<obj.Provider></obj.Provider>包裹起来，并且在value属性中传入想要传入的数据，value是必须填写的属性

3.将这个context对象赋值给需要得到数据的组件的contextType,这样组件的context属性就有了value里面的数据

// app中的值传给profileHeader,后者是前者的孙子组件
import React, { Component } from 'react'
// 1.创建context对象
const UserContext = React.createContext({
  nickname: 'aaa',
  level: 99,
  age: 18
})
class ProfileHeader extends Component {
  render() {
    // console.log(this.context); // 空对象,当给组件的contextType指定context对象之后，就有value了
    // const { nickname, level } = this.props
    return (
      <div>
        <h2>昵称: {this.context.nickname}</h2>
        <h2>等级: {this.context.level}</h2>
      </div>
    )
  }
}
// 3.将这个context对象赋值给需要得到数据的组件的contextType,这样组件的context属性就有了value值
ProfileHeader.contextType = UserContext
function Profile() {
  return (
    <div>
      {/* <ProfileHeader nickname={props.nickname} level={props.level}/> */}
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      nickname: 'sasha',
      level: 99,
      age: 18,
      friends: 'kobe'
    }
  }
  render() {
    return (
      <div>
        {/* 2.一定要把想要传值的组件放在这个组件里面，这样才会传this.state,否则传的是默认的值 */}
        <UserContext.Provider value={this.state}>
          <Profile></Profile>
        </UserContext.Provider>
        <Profile></Profile>
      </div>
    )
  }
}

6跨组件通信–函数组件

因为函数组件没有contextType属性，所以需要使用<obj.Consumer></obj.Consumer>组件里写一个函数来接收value，就是传过来的值

import React, { Component } from 'react'
// 1.创建context对象
const UserContext = React.createContext({
  nickname: 'aaa',
  level: 99,
  age: 18
})
function ProfileHeader() {
  return (
    <UserContext.Consumer>
      {
        value => {
          return (
            <div>
              <h2>昵称: {value.nickname}</h2>
              <h2>等级: {value.level}</h2>
            </div>
          )
        }
      }
    </UserContext.Consumer>
  )
}
function Profile() {
  return (
    <div>
      {/* <ProfileHeader nickname={props.nickname} level={props.level}/> */}
      <ProfileHeader />
      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
      </ul>
    </div>
  )
}
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      nickname: 'sasha',
      level: 99,
      age: 18,
      friends: 'kobe'
    }
  }
  render() {
    return (
      <div>
        {/* 一定要把想要传值的组件放在这个组件里面，这样才会传this.state,否则传的是默认的值 */}
        <UserContext.Provider value={this.state}>
          <Profile></Profile>
        </UserContext.Provider>
        <Profile></Profile>
      </div>
    )
  }
}

五、为什么使用setState()

1.setState的使用

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tLFqwQhs-1649341640229)(img/setState的使用.png)]

2.如何获得异步的结果

两种方法
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avh4RErP-1649341640229)(img/如何获取异步的结果.png)]

3.setState不一定是异步的

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J4d6Q6M2-1649341640230)(img/同步的setState.png)]

4.数据的合并

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gdARl5cv-1649341640231)(img/数据的合并.png)]

5.多个state合并

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WXIcTdoh-1649341640231)(img/多个state合并.png)]

前面的不会完成累加，后面的才可以完成累加功能，state是指preState

六、react的更新流程–性能优化

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vx2odVgK-1649341640232)(img/react的更新机制.png)]
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-POEPu8yd-1649341640233)(img/更改元素重新渲染.png)]
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2QvzaA9-1649341640233)(img/重新渲染.png)]

七、render函数调用–性能优化

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcBV8KWm-1649341640234)(img/render函数被调用.png)]

7.1pureComponent解决类组件的重复调用–源码部分没看

因为这个方法里面会用shallowEqual方法做浅层比较
在这里插入图片描述

7.2高阶组件memo解决函数组件的重复调用–源码部分没看

我们需要使用一个高阶组件memo：

我们将之前的Header、Banner、ProductList都通过memo函数进行一层包裹；
Footer没有使用memo函数进行包裹；
最终的效果是，当counter发生改变时，Header、Banner、ProductList的函数不会重新执行，而Footer的函数会被重新执

行；

八、知识点补充

1.为什么不要直接改变state中的数据

  add() {
    // console.log('添加');
    const newData = { name: 'lisha', age: 19 }
    const newarr = [...this.state.friends]
    newarr.push(newData)
    this.setState({
      friends: newarr
    })

    // 不要下面这样做，因为在性能优化的时候可能会出现问题，比如这里有一个shouldComponentUpdate()函数来优化渲染，但是friends是引用类型
    // 直接更改friends的值会导致返回false,也就是不可以添加数据
    // this.state.friends.push(newData)
    // this.setState({
    //   friends: this.state.friends
    // })
  }
  addAge(index) {
    const newarr = [...this.state.friends]
    newarr[index].age ++
    this.setState({
      friends: newarr
    })
  }
}

2.全局事件传递

1.添加events包

2.引入包，并用 EventEmitter构造函数创建事件总线eventbus

3.用eventbus emit事件名称和数据

4.用eventBus.addListener(事件名称, 处理函数)来接受数据和处理数据，数据在处理函数的形参中

5.获得数据之后，记得清空监听
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cV7PSA0q-1649341640234)(img/事件总线.png)]

import React, { PureComponent } from 'react'
// 引入事件总线方法
import { EventEmitter } from 'events'
// 创建事件总线
const eventBus = new EventEmitter()
class Home extends PureComponent {
  // 在这个生命周期函数中监听事件
  componentDidMount() {
    eventBus.addListener('say-hello', this.handler)
  }
  componentWillUnmount() {
    eventBus.removeListener('say-hello', this.handler)
  }
  handler(...args) {
    console.log([...args]);
  }
  render() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    )
  }
}
class Profile extends PureComponent {
  render() {
    return (
      <div>
        <h2>Profile</h2>
        <button onClick={() => { this.emmitEvent() }}>点击profile</button>
      </div>
    )
  }
  emmitEvent() {
    eventBus.emit('say-hello', 'nihao', 'benben', 123)
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
        <Profile />
      </div>
    )
  }
}

九、如何使用ref

注意不用使用方式的调用不一样，也可以在组件上使用ref对象，这样的话就可以调用组件上的属性和对象了

import React, { PureComponent, createRef } from 'react'

class Counter extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
      </div>
    )
  }
  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}
export default class App extends PureComponent {
  constructor(props) {
    super(props)
    this.titleRef = createRef()
    this.titleRef2 = null
    this.counterRef = createRef()
  }
  render() {
    return (
      // ref可以传入字符串，对象或者函数
      <div>
        <h2 ref={this.titleRef}>hello world</h2>
        <h2 ref="hRef">第二个ref</h2>
        <h2 ref={(args) => this.titleRef2 = args}>nihao</h2>
        <button onClick={() => this.changeText()}>改变文本</button>
        <hr />
        <Counter ref={this.counterRef} />
        <button onClick={() => this.changeCounter()}>改变counter值+1</button>
      </div>
    )
  }
  changeText() {
    // console.log(this.refs);
    // 1.使用方式一：字符串类型,refs已经被弃用了
    this.refs.hRef.innerText = '被改变了文本'
    // 2.使用方式二:对象的形式，使用current来访问ref实例, 目前react推荐的方式
    this.titleRef.current.innerText = '被改变了文本'
    // 3.使用方式三：回调函数方式
    this.titleRef2.innerText = 'hello JavaScript'
  }
  // 可以调用组件对象上的属性和方法
  changeCounter() {
    // console.log(this.counterRef.current);
    this.counterRef.current.increment()
  }
}

在这里插入图片描述