React 扩展

最新推荐文章于 2024-07-16 21:34:21 发布
最新推荐文章于 2024-07-16 21:34:21 发布
阅读量753 收藏 21
点赞数 24
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46026593/article/details/138277472
版权

一、setState

setState更新状态的2种写法

(1)setState(stateChange,,[callback])------对象式的setState

    stateChange为状态改变对象（该对象可以体现出状态的更改）

    callback是可选的回调函数，它在状态更新完毕，界面也更新后（render调用后）才被调用

(2)setState(updater, [callback])------函数式的setState

    updater为返回stateChange对象的函数

    updater可以接收到state和props

    callback是可选的回调函数，它在状态更新，界面也更新后（render调用后）才能调用

总结：对象式的setState是函数式的setState的简写方式（语法糖）

       使用原则：

            如果新状态不依赖于原状态 ===>使用对象方式

            如果新状态依赖于原状态 ===>使用函数方式

            如果需要在setState()执行后获取最新的状态数据，要在第二个callback函数中读取

import React, { Component } from 'react'

export default class Demo extends Component {
  state = {
    count: 0
  }
  add = () => {
    // 对象式的函数式的setState
    /*// 1.获取原来的count值
    const {count} = this.state
    // 2.更新状态
    this.setState({
      count:count+1
    }, () => {
      console.log(this.state.count);
    })*/

    // 函数式的setState
    this.setState((state, props) => ({count:state.count+1}))
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}

二、lazyLoad

const Home = lazy(() => {import('./Home')})

在注册路由的地方将路由包起来，fallback中既可以是一个组件也可以是Dom,不过此组件不可以使用懒加载

<Suspense fallback={<h1>Loading</h1>}></Suspense>

三、Hooks

1.React Hook/Hooks 是什么？

   Hook是React16.8.0版本添加的新特性/新语法

   可以让你在函数组件中使用state以及其他的React特性

2.三个常用的Hook

   (1)State Hook: React.useState()

   (2)Effect Hook: React.useEffect()

   (3)Ref Hook: React.useRef()

4.State Hook

    (1)State Hook让函数式组件可以有state状态，并进行状态数据的读写操作

    (2)语法：const {xxx,setXXX} = React.useState(initValue)

    (3)useState()说明：

        参数：第一次初始化指定的值在内部作缓存

        返回值：包含2个元素的数组，第1个为内部当前状态值，第2个为更新状态的函数

    (4)setXxx()2中写法：

        setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值

        setXxx(value => newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值

function Demo() {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState('tom')
  function add () {
    // 第一种写法
    setCount(count+1)
    // 第二种写法
    setCount((count) => count +1)
  }
  function changeName() {
    setName('jack')
  }
  return (
    <div>
      <h2>当前求和为{count}</h2>
        <h2>我的名字是：{name}</h2>
        <button onClick={add}>点我+1</button>
        <button onClick={changeName}>点我改名</button>
      
    </div>
  )
}
3.Effect Hook

   (1)Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

   (2)React中的副作用操作：

        发ajax请求数据获取

        设置订阅/启动定时器

        手动更改真是DOM

    (3)语法和说明

        React.useEffect(() => {

          // 在此处可以执行任何副作用操作

          return () => { // 在组件卸载时执行

            // 在此做一些收尾操作，比如清除定时器/取消订阅等

          }

        },[stateValue]) // 如果指定的是[],回调函数只会在第一次render()之后执行

     (4)可以把useEffect Hook看做如下三个函数的组合

        componentDidMount()

        componentDidUpdate()

        componentWillUnmount()

function Demo() {
  const [count, setCount] = React.useState(0)
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count +1)
    }, 1000)
    return () => {
      clearInterval()
    }
  },[])
  function add () {
    // 第一种写法
    // setCount(count+1)
    // 第二种写法
    setCount((count) => count +1)
  }
  // 卸载组件的回调
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h2>当前求和为{count}</h2>
      <button onClick={add}>点我+1</button>      
      <button onClick={unmount}>卸载组件</button>      
    </div>
  )
}
5.useRef

Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据

语法：const refContainer = useRef()

作用：保存标签对象，功能与React.createRef()一样

function Demo() {
  const [count, setCount] = React.useState(0)
  const myRef = React.useRef()
  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count +1)
    }, 1000)
    return () => {
      clearInterval()
    }
  },[])
  function add () {
    // 第一种写法
    // setCount(count+1)
    // 第二种写法
    setCount((count) => count +1)
  }
  // 卸载组件的回调
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  //提示输入的回调 
  function show() {
    alert(myRef.current.value)
  }
  return (
    <div>
      <input type="text" ref={myRef}/>
      <h2>当前求和为{count}</h2>
      <button onClick={add}>点我+1</button>      
      <button onClick={unmount}>卸载组件</button>      
      <button onClick={show}>点击显示数据</button>      
    </div>
  )
}

四、Fragment

使用<Fragment><Fragment/>    <></>

作用：可以不用必须有一个真实DOM根标签了。

import React, { Component, Fragment } from 'react'

export default class Demo extends Component {
  render() {
    return (
      <Fragment key={1}>
        <input type="text" />
        <input type="text" />
      </Fragment>
    )
  }
}

五、Context

理解：一种组件间通信方式, 常用于[根组件]与【后代组件】间通信

使用：创建Context对象

       const XxxContext = React.createContext()

       渲染子组件的时候，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据

       <XxxContext.Provider value={数据}>子组件</XxxContext.Provider>

后代组件读取数据：

        // 第一种方式：仅适用于类组件

        static contextType = XxxContext // 声明接收context

        this.context // 读取context中的value值

        // 第二种方式： 函数组件与类组件都可以

        <xxxContext.Consumer>

                {

                    value => { // value就是context中的value数据

                    要显示的内容

                    }

                }

        </xxxContext.Consumer>

注意：

      在应用开发中一般不用context，一般都用它的封装react插件

import React, { Component } from 'react'

// 创建Context对象
const MyContext = React.createContext()
export default class Demo extends Component {
  state = {
    username: 'tom'
  }
  render() {
    const {username} = this.state
    return (
      <div>
        <h3>我是A组件</h3>
        <h4>我的用户名是：{username}</h4>
        <MyContext.Provider value={username}>
          <B/>
        </MyContext.Provider>
      </div>
    )
  }
}
class B extends Component {
  render() {
    return (
      <div>
        <h3>我是B组件</h3>
        <C/>
      </div>
    )
  }
}
/*class C extends Component {
  // 声明接收context
  static contextType = MyContext
  render() {
    return (
      <div>
        <h3>我是C组件</h3>
        <h4>我从A组件接收到的用户名是：{this.context}</h4>
      </div>
    )
  }
}
*/
function C(params) {
  return (
    <div>
      <h3>我是C组件</h3>
      <h4>我从A组件接收到的用户名是：
        {/* 类组件和函数组件都可以用 */}
        <MyContext.Consumer>
          {
            value => {
              return value
            }
          }
        </MyContext.Consumer>
      </h4>
    </div>
  )
}

六、组件优化

Component的2个问题

只要执行setState()，即使不改变状态数据，组件也会重新render()

只当前组件重新render(),就会自动重新render子组件==>效率低

效率高的做法：

       只有当组件的state或props数据发生改变时才重新render()

原因：

       Component中的shouldComponentUpdate()总是返回true

解决：

       办法1：重写Component中的shouldComponentUpdate()方法

                    比较新旧state或props数据，如果有变化才返回true，如果没有返回false

        办法2：使用PureComponent

                     PureComponent重写了shouldComponentUpdate()，只有state或props数据有变化才返回true

注意：之前的版本

       只是进行state和props数据的浅比较，如果只是数据对象内部数据变了，返回false

       不要直接修改state数据，而是要产生新数据

现在是可以的。

项目中一般使用PureComponent来优化

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

export default class Parent extends Component {
  state = {
    carName: 'ccc'
  }
  changeCar = () => {
    this.setState({
      carName: 'vxx'
    })
    // 之前的版本不能修改，但是现在可以的
    // const obj = this.state
    // obj.carName = 'vvv'
    // this.setState(obj)
  }
  // shouldComponentUpdate (nextProps, nextState) {
  //   return !this.state.carName === nextState.carName
  // }
  render() {
    const {carName} = this.state
    return (
      <div>
        <h3>我是Parent组件</h3>
        <h4>我的车名字是：{carName}</h4>
        <button onClick={this.changeCar}>huanche</button>
        <Child carName={carName}/>
      </div>
    )
  }
}

class Child extends PureComponent {
  // shouldComponentUpdate (nextProps, nextState) {
  //   return !this.props.carName === nextProps.carName
  // }
  render() {
    return (
      <div>
        <h3>我是Child组件</h3>
        <span>我接到的是{this.props.carName}</span>
      </div>
    )
  }
}

七、render Props

如何向组件内部动态传入带内容的结构(标签)？

Vue中：

     使用slot技术，也就是通过组件标签体传入结构

React中：

     使用children props：通过组件标签体传入结构

     使用render props：通过组件标签属性传入结构，一般用render函数属性

Children props

     <A>

          <B>xxxx<B/>

     </A>

     {this.props.children}

问题：如果B组件需要A组件内的数据， ==>做不到

render props

    A组件：<A render={(data) => <C data={data}></C>}></A>

    C组件：读取A组件传入的数据显示：{this.props.data}

import React, { Component } from 'react'

export default class Parent extends Component {
  render() {
    return (
      <div>
        我是Parent组件
        {/*
        没有参数的情况
          <A>
            <B/>
          <A/> 
        */}
        {/* 有参数的情况 */}
        <A render={(name) => <B name={name}/>}/>
      </div>
    )
  }
}

class A extends Component {
  state = {
    name: 'tom'
  }
  render() {
    const {name} = this.state
    return (
      <div>
        我是A组件
        {/* 没有参数的情况 */}
        {/* {this.props.children} */}
        {/* 有参数的情况 */}
        {this.props.render(name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div>
        我是B组件
        {this.props.name}
      </div>
    )
  }
}

八、错误边界

理解：错误边界（Error boundary），用来捕获后代组件错误，渲染出备用页面

特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件，定时器中产生的错误

使用方式：

       getDerivedStateFromError配合componentDidCatch

生命周期函数，一旦后台组件报错，就会触发

static getDeriverdStateFromError(error) {

   console.log(error)

   // 在render之前触发

   // 返回新的state

   return  {

      hasError: true

   }

}

componentDidCatch(error,info) {

    // 统计页面的错误，发送请求发送到后台去

    console.log(error,info)

}

具体代码示例：

// Parent.jsx
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
  state = {
    hasError: '' // 用于标识子组件是否产生错误
  }
  static getDerivedStateFromError (error) {
    // 当Parent的子组件出现报错的时候，会触发getDerivedStateFromError调用，并携带错误信息
    console.log(error)
    return {
      hasError: true
    }
  }
  componentDidCatch() {
    console.log('统计错误次数，反馈给服务器，用于通知编码人员进行bug解决');
  }
  render() {
    return (
      <div>
        <h2>我是Parent组件</h2>
        {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2>: <Child/>}
      </div>
    )
  }
}



// Child.jsx
import React, { Component } from 'react'

export default class Child extends Component {
  state = {
    // users: [
    //   {id: '001', name: 'tom', age: 18},
    //   {id: '002', name: 'jacom', age: 19},
    //   {id: '003', name: 'piy', age: 20},
    // ]
    users: 'dddd'
  }
  render() {
    return (
      <div>
        <h2>我是Child组件</h2>
        {
          this.state.users.map((userObj) => {
            return (<h4 key={userObj.id}>
              {userObj.name}---{userObj.age}
            </h4>)
          })
        }
      </div>
    )
  }
}

九、组件间通信的方式

1.组件间的关系

父子组件

兄弟组件（非嵌套组件）

祖孙组件（跨级组件）

2.几种通信方式

props：

   (1)children props

   (2)render props

消息订阅-发布

   pubs-sub,event等

集中式管理：

   redux、dva等等

conText:

   生产者-消费者模式

比较好的搭配方式

   父子组件：props

   兄弟组件：消息订阅-发布，集中式管理

   祖孙组件（跨级组件）：消息订阅-发布，集中式管理，conText(开发用的少，封装插件的多)

☞^O^
关注
  • 24
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【React扩展】2、PureComponent、ErrorBoundary、render props和组件通信方式总结
Coding and studying
08-05 6222
父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）
react扩展程序_VS代码的最佳React扩展
culiu9261的博客
07-21 528
react扩展程序When working with React, there's lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, "there's got to be a better way". Don't worry, there...
React开发扩展安装
wsq_yyds的博客
12-02 351
React开发需要安装的扩展，浏览器扩展，vscode扩展
React VScode 扩展组件
LSH_O的博客
02-10 626
Reactjs code snippets （Reactjs 代码片段 "有每个片段的触发器"） Reactjs code snippets - Visual Studio Marketplace One Dark Pro （一个黑暗专业） One Dark Pro - Visual Studio Marketplace vscode-icons （vscode 图标） vscode-icons - Visual Studio Marketplace npm Intellisense
React实现组件扩展机制
qq_37011724的博客
02-01 653
在约定的init文件中，配置自定义的扩展点。
React扩展包
02-09
React扩展包是React生态系统中的一个重要组成部分，它们是为了增强React库的功能和性能而设计的第三方模块。React是由Facebook开发的一个用于构建用户界面的JavaScript库，它以其组件化开发方式和虚拟DOM技术著称。...
React扩展
02-09
React扩展是React生态系统中的一个重要部分，它通过提供额外的功能和工具来增强React的基本能力，使得开发者可以更加高效、便捷地构建复杂的Web应用。React作为JavaScript库，主要用于构建用户界面，尤其是单页应用...
Backbone 的 React 扩展
06-08
Reactbone 通过暴露两个子类 ReactModel 和 ReactCollection，Reactbone 扩展了 Backbone 模型和集合，以更好地处理不可变的依赖项，例如 React。这些类公开方法以允许在模型和集合之间轻松构建数据层次结构，并公开...
react_chrome_extension:只需将React扩展为可启动新标签的扩展程序即可
03-29
描述中提到的“只需将React扩展为可启动新标签的扩展程序，最后一次测试”暗示了这个项目可能是一个教程或者示例代码库，展示了如何将React框架应用于构建Chrome扩展，并且已经过至少一次测试验证其功能。...
react-devtools 的谷歌扩展程序
08-01
它作为一个谷歌浏览器的扩展程序，大大简化了在浏览器环境中进行React开发的工作流程。 首先，让我们了解一下如何将“react-devtools”的谷歌扩展程序安装到浏览器中。步骤非常简单，你只需下载扩展程序的压缩包，...
React学习笔记02-----React基本使用
m0_67357141的博客
07-14 347
想实现页面的，而不是整个网页的刷新。AJAX+DOM可以实现局部刷新。
前端效果ᅳ1、react实现时间上下轮播特效
ChenJin_2的博客
07-16 161
前端效果ᅳ1、react实现时间上下轮播特效
react的解构赋值
左直拳的马桶_日用桶
07-13 224
我的感觉，react开发效率不高。这当然应该是我还不熟悉react的缘故。但是，在阅读react代码过程中，其中一个容易困惑的地方是它到处充斥着的解构赋值。当然了，解构赋值并不是React特有的功能，而是ES6（ECMAScript 2015）引入到JavaScript中的语言特性。但是，这难道不是json对象的定义模式吗，怎么在这里变成了赋值，并且是将左边的东西赋给右边的？只能说这种赋值，忽左忽右，神鬼莫测。简则简矣，可读则未必。据说解构赋值简化了语言，使得代码更具可读性云云。哦，这是解构赋值，相当于。
图片上传裁剪react-cropper
xiao970615的博客
07-11 345
【代码】图片上传裁剪react-cropper。
ReactRouter v6升级的步骤
feixin369的博客
07-14 382
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
react hook---钩子函数的使用，useState，useReducer，useEffect，useRef,useContext，自定义hook
I_am_shy的博客
07-12 1588
什么是hook钩子函数 hook（钩住），表示拦截操作，可以在某些操作执行时拦截住（钩住），执行hook函数的逻辑， 在react中，hook函数一般是use开头，然后提供一些方法api，也就是说你可以理解成react中的hook就是一套便于操作的api
react Jsx基础概念和本质
最新发布
m0_68716504的博客
07-16 413
jsx是JavaScript和XML(HTML)的缩写，表示在js代码中编写HTML模板结构，它是react中编写UI模板的方式。
启动react 18.2.x项目报node错误
2401_85955297的博客
07-12 212
启动react 18.2.x项目报node错误
Java Reactive Streams Backpressure mechanisms
知秋的博客
07-13 922
Java Reactive Streams Backpressure mechanisms
能实现手写签名的 react 扩展库
05-23
可以考虑使用 react-signature-canvas 这个库，它提供了一个 Canvas 组件来实现手写签名。使用它的流程如下： 1. 安装库 ``` npm install react-signature-canvas ``` 2. 在组件中引入并使用 Canvas 组件 ```jsx...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值