React扩展

最新推荐文章于 2024-08-08 21:22:12 发布
最新推荐文章于 2024-08-08 21:22:12 发布
阅读量262 收藏
点赞数 1
分类专栏： React
原文链接：https://blog.csdn.net/weixin_43392489/article/details/120721740
版权
本文详细介绍了React中的关键概念和技术，包括setState的两种用法，路由组件的懒加载实现，React Hooks如useState、useEffect和useRef的应用，以及组件优化技巧。此外，还探讨了错误边界、组件通信方式如props、render props以及错误处理策略。文章旨在帮助读者深入理解React的高级特性和最佳实践。
摘要由CSDN通过智能技术生成

1. setState更新状态的2种写法

  1. setState(stateChange, [callback])------对象式的setState
    • stateChange为状态改变对象(该对象可以体现出状态的更改)
    • callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
  2. setState(updater, [callback])------函数式的setState
    • updater为返回stateChange对象的函数。
    • updater可以接收到state和props。
    • callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

  • 对象式的setState是函数式的setState的简写方式(语法糖)
  • 使用原则：
    1. 如果新状态不依赖于原状态 → 使用对象方式
    2. 如果新状态依赖于原状态 → 使用函数方式
    3. 如果需要在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);
    })
    //console.log('12行的输出',this.state.count); //0 */

    //函数式的setState
    this.setState(state => ({count: state.count + 1}))
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}

2. lazyLoad

路由组件的lazyLoad

//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
	<Switch>
		<Route path="/xxx" component={Xxxx}/>
    	<Redirect to="/login"/>
	</Switch>
</Suspense>

—About

​ —index.jsx

—Home

​ —index.jsx

—Loading

​ —index.jsx

index.jsx

  • About/index.jsx

    import React, {Component} from 'react'

export default class About extends Component {
  render() {
    return (
      <h2>我是About组件</h2>
    )
  }
}

  • Home/index.jsx

    import React, {Component} from 'react'

export default class Home extends Component {
  render() {
    return (
      <h2>我是Home组件</h2>
    )
  }
}

  • Loading/index.jsx

    import React, {Component} from 'react'

export default class Loading extends Component {
  render() {
    return (
      <div>
        <h1 style={{backgroundColor: 'gray', color: 'orange'}}>Loading....</h1>
      </div>
    )
  }
}

  • index.jsx

    import React, {Component, lazy, Suspense} from 'react'
import {NavLink, Route} from 'react-router-dom'

// import Home from './Home'
// import About from './About'

import Loading from './Loading'

const Home = lazy(() => import('./Home'))
const About = lazy(() => import('./About'))

export default class Demo extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>React Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <NavLink className="list-group-item" to="/about">About</NavLink>
              <NavLink className="list-group-item" to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Suspense fallback={<Loading/>}>
                  {/* 注册路由 */}
                  <Route path="/about" component={About}/>
                  <Route path="/home" component={Home}/>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

3. Hooks

1. React Hook/Hooks是什么?

  1. Hook是React 16.8.0版本增加的新特性/新语法
  2. 可以让你在函数组件中使用 state 以及其他的 React 特性

2. 三个常用的Hook

  1. State Hook: React.useState()
  2. Effect Hook: React.useEffect()
  3. Ref Hook: React.useRef()

3. 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): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

4. Effect Hook

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

  2. React中的副作用操作:

    • 发ajax请求数据获取
    • 设置订阅 / 启动定时器
    • 手动更改真实DOM

  3. 语法和说明:

    useEffect(() => { 
    // 在此可以执行任何带副作用操作
    return () => { // 在组件卸载前执行
    	// 在此做一些收尾工作, 比如清除定时器/取消订阅等
    }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

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

    • componentDidMount()
    • componentDidUpdate()
    • componentWillUnmount()

5. Ref Hook

  1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
  2. 语法：const refContainer = useRef()
  3. 作用：保存标签对象,功能与React.createRef()一样
import React from 'react'
import ReactDOM from 'react-dom'

//类式组件
/* class Demo extends React.Component {

	state = {count:0}

	myRef = React.createRef()

	add = ()=>{
		this.setState(state => ({count:state.count+1}))
	}

	unmount = ()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}

	show = ()=>{
		alert(this.myRef.current.value)
	}

	componentDidMount(){
		this.timer = setInterval(()=>{
			this.setState( state => ({count:state.count+1}))
		},1000)
	}

	componentWillUnmount(){
		clearInterval(this.timer)
	}

	render() {
		return (
			<div>
				<input type="text" ref={this.myRef}/>
				<h2>当前求和为{this.state.count}</h2>
				<button onClick={this.add}>点我+1</button>
				<button onClick={this.unmount}>卸载组件</button>
				<button onClick={this.show}>点击提示数据</button>
			</div>
		)
	}
} */

function Demo() {
  //console.log('Demo');

  const [count, setCount] = React.useState(0)
  const myRef = React.useRef()

  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  //加的回调
  function add() {
    //setCount(count+1) //第一种写法
    setCount(count => count + 1)
  }

  //提示输入的回调
  function show() {
    alert(myRef.current.value)
  }

  //卸载组件的回调
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <input type="text" ref={myRef}/>
      <h2>当前求和为：{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={show}>点我提示数据</button>
    </div>
  )
}

export default Demo

4. 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>
    )
  }
}

5. Context

理解

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用

  1. 创建Context容器对象：

    const XxxContext = React.createContext()

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

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

  3. 后代组件读取数据：

    //第一种方式:仅适用于类组件 
static contextType = xxxContext  // 声明接收context
this.context // 读取context中的value数据

//第二种方式: 函数组件与类组件都可以
<xxxContext.Consumer>
{
    value => ( // value就是context中的value数据
    	要显示的内容
    )
}
</xxxContext.Consumer>

注意

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

index.css

index.jsx

  • index.css

    .parent {
    width: 500px;
    background-color: orange;
    padding: 8px;
}

.child {
    width: 100%;
    background-color: skyblue;
    padding: 8px;
}

.grand {
    width: 100%;
    background-color: gray;
    padding: 8px;
}

  • index.jsx

    import React, {Component} from 'react'
import './index.css'

//创建Context对象
const MyContext = React.createContext()
const {Provider, Consumer} = MyContext
export default class A extends Component {

  state = {username: 'tom', age: 18}

  render() {
    const {username, age} = this.state
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <h4>我的用户名是:{username}</h4>
        <Provider value={{username, age}}>
          <B/>
        </Provider>
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <C/>
      </div>
    )
  }
}

/* class C extends Component {
	//声明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C组件</h3>
				<h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
			</div>
		)
	}
} */

function C() {
  return (
    <div className="grand">
      <h3>我是C组件</h3>
      <h4>我从A组件接收到的用户名:
        <Consumer>
          {value => `${value.username},年龄是${value.age}`}
        </Consumer>
      </h4>
    </div>
  )
}

6. 组件优化

Component的2个问题

  1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

  2. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

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

原因

Component中的shouldComponentUpdate()总是返回true

解决

  1. 办法1:
    • 重写shouldComponentUpdate()方法
    • 比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
  2. 办法2:
    • 使用PureComponent
    • PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
  3. 注意:
    • 只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
    • 不要直接修改state数据, 而是要产生新数据
    • 项目中一般使用PureComponent来优化

index.css

index.jsx

  • index.css

    .parent {
    background-color: orange;
    padding: 10px;
}

.child {
    background-color: gray;
    margin-top: 30px;
    padding: 10px;
}

  • index.jsx

    import React, {PureComponent} from 'react'
import './index.css'

export default class Parent extends PureComponent {

  state = {carName: "奔驰c36", stus: ['小张', '小李', '小王']}

  addStu = () => {
    /* const {stus} = this.state
    stus.unshift('小刘')
    this.setState({stus}) */

    const {stus} = this.state
    this.setState({stus: ['小刘', ...stus]})
  }

  changeCar = () => {
    //this.setState({carName:'迈巴赫'})

    const obj = this.state
    obj.carName = '迈巴赫'
    console.log(obj === this.state);
    this.setState(obj)
  }

  /* shouldComponentUpdate(nextProps,nextState){
    // console.log(this.props,this.state); //目前的props和state
    // console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return !this.state.carName === nextState.carName
  } */

  render() {
    console.log('Parent---render');
    const {carName} = this.state
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        {this.state.stus}&nbsp;
        <span>我的车名字是：{carName}</span><br/>
        <button onClick={this.changeCar}>点我换车</button>
        <button onClick={this.addStu}>添加一个小刘</button>
        <Child carName="奥拓"/>
      </div>
    )
  }
}

class Child extends PureComponent {

  /* shouldComponentUpdate(nextProps,nextState){
    console.log(this.props,this.state); //目前的props和state
    console.log(nextProps,nextState); //接下要变化的目标props，目标state
    return !this.props.carName === nextProps.carName
  } */

  render() {
    console.log('Child---render');
    return (
      <div className="child">
        <h3>我是Child组件</h3>
        <span>我接到的车是：{this.props.carName}</span>
      </div>
    )
  }
}

7. render props

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

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

index.css

index.jsx

  • index.css

    .parent {
    background-color: orange;
    padding: 10px;
}

.a {
    background-color: gray;
    margin-top: 30px;
    padding: 10px;
}

.b {
    background-color: skyblue;
    margin-top: 30px;
    padding: 10px;
}

  • index.jsx

    import React, {Component} from 'react'
import './index.css'
import C from '../1_setState'

export default class Parent extends Component {
  render() {
    return (
      <div className="parent">
        <h3>我是Parent组件</h3>
        <A render={(name) => <C name={name}/>}/>
      </div>
    )
  }
}

class A extends Component {
  state = {name: 'tom'}

  render() {
    console.log(this.props);
    const {name} = this.state
    return (
      <div className="a">
        <h3>我是A组件</h3>
        {this.props.render(name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    console.log('B--render');
    return (
      <div className="b">
        <h3>我是B组件,{this.props.name}</h3>
      </div>
    )
  }
}

8. 错误边界

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

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

使用方式：

getDerivedStateFromError配合componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

Child.jsx

Parent.jsx

  • Child.jsx

    import React, {Component} from 'react'

export default class Child extends Component {
  state = {
    users: [
      {id: '001', name: 'tom', age: 18},
      {id: '002', name: 'jack', age: 19},
      {id: '003', name: 'peiqi', age: 20},
    ]
    // users:'abc'
  }

  render() {
    return (
      <div>
        <h2>我是Child组件</h2>
        {
          this.state.users.map((userObj) => {
            return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
          })
        }
      </div>
    )
  }
}

  • Parent.jsx

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

export default class Parent extends Component {

  state = {
    hasError: '' //用于标识子组件是否产生错误
  }

  //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
  static getDerivedStateFromError(error) {
    console.log('@@@', error);
    return {hasError: error}
  }

  componentDidCatch() {
    console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
  }

  render() {
    return (
      <div>
        <h2>我是Parent组件</h2>
        {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child/>}
      </div>
    )
  }
}

9. 组件通信方式总结

组件间的关系：
  • 父子组件
  • 兄弟组件（非嵌套组件）
  • 祖孙组件（跨级组件）
几种通信方式：
  1. props：
    • children props
    • render props
  2. 消息订阅-发布：
    pubs-sub、event等等
  3. 集中式管理：
    redux、dva等等
  4. conText:
    生产者-消费者模式
比较好的搭配方式：
  • 父子组件：props
  • 兄弟组件：消息订阅-发布、集中式管理
  • 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)
KaiSarH
关注
专栏目录
【React】拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结
YK菌的博客
06-19 1060
拓展知识
React扩展包
02-09
React扩展包是React生态系统中的一个重要组成部分，它们是为了增强React库的功能和性能而设计的第三方模块。React是由Facebook开发的一个用于构建用户界面的JavaScript库，它以其组件化开发方式和虚拟DOM技术著称。...
react18组件通信
poguanba的博客
10-25 196
当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的props属性中接收该内容。3. 兄弟组件通信，通过子传父，父传子实现。1. 父传子 props。
react18中的组件通信方式
最新发布
flower886的博客
08-08 379
React 18 中组件通信的方式有很多，选择哪种方式取决于具体的需求和应用的复杂度。父子组件通信：通过 props 传递数据和回调函数。兄弟组件通信：通过共同的父组件共享状态。使用 Context API：适用于跨越多个层级的组件通信。使用 Redux：适用于大型应用中的复杂状态管理。使用事件总线：通过发布/订阅模式在组件之间传递消息。每种方式都有其适用的场景和优缺点，开发者可以根据具体需求选择合适的方式来实现组件之间的通信。
React 18 组件通信 将props传递给子组件
jyn15159的博客
06-02 1611
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。不能改变 props。当需要交互性时，可以设置 state。
【react】react18的学习（四）--复合组件通信
zhangankang的博客
04-15 1048
与类组件一样，区别就是使用hooks函数组件语法；且后代组件也有两种方式：标签、的结合，定义上下文对象，在祖先组件使用并传值，子孙组件使用；2、类组件使用：祖先组件提供方式1种；子孙组件使用方式2种。一般使用props、状态管理，比较常用，上下文比较难维护；包括父子、及更深层嵌套，就是借助一个共同组件上下文。借助上下文对象：类似vue事件总线。1、创建指定上下文对象。3、hooks组件使用。
react-bpmn:BPMN js的React扩展
03-05
**React-bpmn：BPMN js的React扩展** 在当今的Web开发中，业务流程建模和表示（Business Process Model and Notation，简称BPMN）已经成为一个重要的工具，用于设计、执行和优化企业的业务流程。React-bpmn是一个...
react-devtools 的谷歌扩展程序
08-01
它作为一个谷歌浏览器的扩展程序，大大简化了在浏览器环境中进行React开发的工作流程。 首先，让我们了解一下如何将“react-devtools”的谷歌扩展程序安装到浏览器中。步骤非常简单，你只需下载扩展程序的压缩包，...
react-extention:前端尝试React扩展
03-28
在本文中，我们将深入探讨如何使用React和TypeScript构建一个Chrome浏览器扩展，即"react-extention:前端尝试React扩展"项目。这个项目是初学者学习如何将React与Chrome扩展结合的绝佳实例，它展示了如何利用现代...
React 代码分割，懒加载，错误边界
m0_61224256的博客
08-25 233
代码分割之import 之静动态导入 staic import 静态导入 import *** from ''./a.js" 或 import './a.js'
react实现路由懒加载
weixin_45481456的博客
07-10 2696
react实现路由懒加载
React -- 组件通信
码海逆行
02-17 1070
组件通信，父传子props，子传父 引用父级函数，跨层 使用createContext 创建上下文对象
React18介绍及setState、suspense、useTransition、useDeferredValue的使用
月光晒了很凉快的博客
10-16 1429
如果你有很多没那么着急的内容要渲染更新就可以使用此hook函数。它可以对于更新渲染进行降级，提高更重要的组件的提前渲染。
React之组件之间的通讯
youhebuke225的博客
05-11 283
文章目录父子通讯代码知识点子父通讯兄弟通讯 https://blog.csdn.net/wanghaoyingand/article/details/122443720 https://blog.csdn.net/qq_41809113/article/details/120980237 https://baijiahao.baidu.com/s?id=1674880045858894330&wfr=spider&for=pc 父子通讯 代码 import {Component} from
React组件的生命周期函数
热门推荐
m0_71485750的博客
09-25 1万+
注意这个不常用不是我说的, 实在React官网中, 官方列举的。
react中组件之间的通信
fangqi20170515的博客
08-05 339
react中组件之间的传值 总结
组件通信(react)
0.0 的博客
01-25 1550
React 中组件之间的通信分为三种情况： 父组件给子组件传值：Props 子组件给父组件传值：回调函数 非父子组件之间传值：事件总线 一、子组件给父组件传值 React 中要实现子组件给父组件传值，需要先让父组件通过 props 传递一个函数给子组件，然后在子组件中调用该函数，并将数据传递给父组件。 1、父组件传递函数给子组件 export default class Parent extends Component { state = { name: '' ..
React（react18）中组件通信04——redux入门
@素素~的博客
09-20 759
React（react18）中组件通信04——redux入门
React 扩展：从脚手架到 setState 深入理解
这篇文档主要介绍了如何创建和扩展一个React应用，以及在React中使用`setState`的方法。首先，我们看到的是创建一个新的React脚手架项目的步骤，通过运行`create-react-app react_extension`命令，在指定路径下初始...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值