React 新版本特性说明

最新推荐文章于 2024-09-25 16:14:19 发布
最新推荐文章于 2024-09-25 16:14:19 发布
阅读量794 收藏 3
点赞数
分类专栏： javascript web前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luofeng457/article/details/101864677
版权
web前端 同时被 3 个专栏收录
98 篇文章 0 订阅
订阅专栏
javascript
58 篇文章 0 订阅
订阅专栏
react
9 篇文章 0 订阅
订阅专栏

1.React 16版本以前渲染一个组件最外层有时要使用到一个无意义的<div>元素作为包裹元素，否则会报错；React 16.2版本以后，新增了react.fragment API，不需要外层有包裹元素时，可以使用<></>或者<Fragment></Fragment>（需要导入import React, { Fragment } from 'react'）

jsx
  1. 注释
    // 注释一，推荐
{/* xxx */}
// 注释二
{
	// xxx
}
  2. 语法
    1. label中的for -> htmlFor
2. 类名class -> className
react vscode 插件
  1. simple react snippets代码补全插件
react 子组件对父组件的传值进行类型校验

PropTypes

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Test extends Component {

}

Test.propTypes = {
	index: PropTypes.number,
	addr: PropTypes.string,
	addNum: PropTypes.func,
}

export default Test;
componentDidUpdate(preProps, preState, snapshot)
  1. componentDidUpdate(preProps, preState, snapshot)在更新后会立即调用，首次不会调用；第三个参数在组建中使用了getSnapshotBeforeUpdate()，则snapshot值为该函数的返回值，否则为undefined；
  2. demo：
    import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

const LazyComponent = React.lazy(() => import('./components/Lazy'));

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      greet: 'hello, React 16'
    }
    this.changeState = this.changeState.bind(this);
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return 1;
  }
  componentDidUpdate(preProps, preState, snapshot) {
    console.log('preProps: ', preProps);		// preProps: {}
    console.log('preState: ', preState);		// preState: {greet: "hello, React 16"} 
    console.log('snapshot: ', snapshot);		// 1
  }
  changeState() {
    this.setState({
      greet: 'Changed'
    })
  }
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
          <LazyComponent greet={this.state.greet} />
          <button onClick={this.changeState}>change</button>
      </Suspense>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))
React生命周期

在这里插入图片描述

shouldComponentUpdate(nextProps, nextState) {
	if (nextProps.input !== this.props.input) {
		return true;
	} else {
		return false;
	}
}

在这里插入图片描述

  1. 在React16版本中，以下方法被标记为不安全方法，应该避免使用：
    1. UNSAFE_componentWillMount()
    2. UNSAFE_componentWillUpdate()
    3. UNSAFE_componentWillReceiveProps()
  2. React16版本新增的生命周期函数：
    1. static getDerivedStateFromProps() —— 仅用于组件在props变化时更新state；
    2. getSnapshotBeforeUpdate()
    3. static getDerivedStateFromError()
    4. componentDidCatch()
  3. 挂载时生命周期函数调用顺序：
    1. constructor()
    2. static getDerivedStateFromProps()
    3. render()
    4. componentDidMount()
  4. 更新时生命周期函数调用顺序：
    1. static getDerivedStateFromProps()
    2. shouldComponentUpdate()
    3. render()
    4. getSnapShotBeforeUpdate()
    5. componentDidUpdate()
  5. 卸载时
    1. componentWillUnmount()
  6. 错误处理
    1. static getDerivedStateFromError()
    2. componentDidCatch()
  7. constructor()使用：
    不初始化state或者进行方法绑定时，不需要为组件实现构造函数；（不调用时默认会被加一个空的constructor）
  8. super使用
    构造函数中的操作不应该具有副作用；
    super仅能用于以下两种方式：
    1. 函数调用super()，通常用于构造函数中；
    2. 访问父类原型链属性或方法：super.prop 或super[prop]
      在这里插入图片描述
class Parent {
    constructor() {
        this.name = 'fn';
    }
    getName() {
        return this.name;
    }
}
Parent.prototype.className = 'Parent';

class Child extends Parent {
    constructor(props) {
        super(props);
    }
    getName() {
        return super.getName() + ' from child.'
    }
	getParent() {
		return super.className;
	}
}

let child = new Child();
console.log(child.getName());		// 'fn from child.'
console.log(child.getParent());		// 'Parent'
React.lazy与Suspense

React.lazy()提供了动态加载组件的能力；Suspense是react内置的组件，用于懒加载组件时显示一些站位信息或提示信息（功能类似于loading过渡文字或动画）；

// Lazy.js
import React from 'react';

export default props => (
    <div>{ props.greet }</div>
)


// index.js
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

const LazyComponent = React.lazy(() => import('./components/Lazy'));

const App = () => {
  return (
    <Suspense fallback={<div>loading...</div>}>
        <LazyComponent greet="hello, react16" />
    </Suspense>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'))

在这里插入图片描述

Refs转发

refs转发允许某些组件接收ref，并允许其向下传递ref；根据官方文档，主要应用包括：

  1. 转发 refs 到 DOM 组件
  2. 在高阶组件中转发 refs
  3. 在 DevTools 中显示自定义名称
/**
* 转发 refs 到 DOM 组件
**/

// RefTrans.js
import React from 'react';

export default React.forwardRef((props, ref) => (
    <button className="fancy-button" ref={ref}>
        {props.children}
    </button>
))


// index.js
import React from 'react';
import FancyBtn from './components/RefTrans';

class App extends React.Component {
	constructor(props) {
		super(props);
		this.ref = React.createRef();
	}
	componentDidMount() {
		console.log('ref: ', this.ref.current)
	}
	render() {
		return (
			<FancyBtn ref={this.ref}>Ref转发</FancyBtn>
		)
	}
}

HOC

  1. 定义：HOC（High-Order Component）即高阶组件，实质是一个函数，参数和返回值均为组件；个人感觉HOC在某些方面和函数柯里化有点像，某种程度上可以用于组件定制化。
  2. 常见的高阶组件：react-redux中的connect是一个高阶函数，内部返回一个高阶组件；
  3. 用途：属性代理、反响继承、渲染劫持等
  4. demo:
    class Btn extends React.Component {
  render() {
    return <button style={{color: this.props.color}}>{this.props.desc}</button>
  }
}

const customizedBtn = (WrappedComponent, config) => 
  class CustomizedBtn extends React.Component {
    render() {
      let props = {
        ...this.props,
        color: config.color
      }
      return <WrappedComponent {...props} />
    }
  }

// 仿react-redux中的connect函数
const customizedBtn2 = (config) => (WrappedComponent) => 
  class CustomizedBtn extends React.Component {
    render() {
      let props = {
        ...this.props,
        color: config.color
      }
      return <WrappedComponent {...props} />
    }
  }

const RedPrimaryBtn = customizedBtn(Btn, {color: 'red'});
const BlackSheepBtn = customizedBtn2({color: 'blue'})(Btn)
    在这里插入图片描述
Portals
  1. 意义：Portals允许你将一个子组件渲染到父组件之外的DOM节点上；比如一些弹窗等；
  2. 用法：ReactDOM.createPortal(child, container)——child为需要渲染到外部的子元素（包括react元素、数组或fragments、字符串或数值、布尔类型或null）；container为DOM元素；
  3. demo：
    // MyPortal.js
import React from 'react';
import ReactDOM from 'react-dom';


export default class extends React.Component {
    constructor(props) {
        super(props);
        this.el = document.createElement('div');
    }
    componentDidMount() {
        const portalRoot = document.getElementById('portal')
        portalRoot.appendChild(this.el);
    }
    render() {
        return ReactDOM.createPortal(
            this.props.children,
            this.el
        )
    }
}

// index.js
render() {
	<>
    	<div id="portal"></div>
    	<MyPortal>
      		<span>myportal</span>
    	</MyPortal>
	</>
}
easy mock网站模拟接口数据，在无后端支持时独立开发，无缝衔接
react-transition-group动画库

包含三个模块：Transition、CSSTransition、TransitionGroup

react hooks

从React 16.8版本开始，新增的React hooks可以让用户在不用创建react class的同时可以使用state等react属性；

React框架分层

  1. Virtual DOM层：构建虚拟DOM树，描述页面长什么样

  2. Reconciler层：负责调用组件生命周期方法，计算DOM diff等；

    Reconciliation:
    The algorithm React uses to diff one tree with another to determine which parts need to be changed

    翻译：Reconciliation是React一种用于计算两个dom tree之间差异并决定哪些部分需要更新的算法
    Reconciliation的核心是：

    • 不同类型的组件会生成不同的DOM Tree，React不会尝试对它们做diff，而是使用新的Dom Tree替换旧的；
    • 列表的diff依赖于key值，key的取值应该是稳定、唯一并可预测的；

  3. Renderer层：负责根据虚拟DOM树和diff patch渲染对应页面；

React Fiber

React Fiber是React 16提出的新概念，是React重构的核心，主要是对Reconciler层的重写（Stack Reconciler ⇒ Fiber Reconciler）；

Fiber Reconciler包括两个阶段：render phase和commit phase

  1. render phase可以异步执行，调用的生命周期函数列表：

    	[UNSAFE_]componentWillMount (deprecated)
	[UNSAFE_]componentWillReceiveProps (deprecated)
	getDerivedStateFromProps
	shouldComponentUpdate
	[UNSAFE_]componentWillUpdate (deprecated)
	render

  2. commit phase通常是同步执行（因为该步骤涉及到真实DOM的更新及UI展现），调用的生命周期函数：

    getSnapshotBeforeUpdate
componentDidMount
componentDidUpdate
compoentWillUnmount

React 15及以前的版本，在渲染大型组件时，由于其Reconciler层和Renderer层的执行是连续不可间断的；如果遇到大型组件；组件的执行时间有时会非常长，可能会阻塞动画渲染、用户交互等高实时性的任务，出现掉帧等，影响了用户体验；

我们知道，页面的显示其实就是通过一系列数据渲染得到视图，实质就是页面渲染相关的函数调用；
UI = render(data)

React 15及以前的版本，Reconciler的实现是基于内置的调用栈的同步递归模型去遍历Dom Tree；每次更新需要栈中函数全部调用结束，即栈空为止；这个过程是不被打断的，一次可能执行很长时间，阻塞页面渲染，所以会导致掉帧等；

由于调用栈进行视图更新的过程是连续的，为了把React渲染任务切分为增量单元分段执行，React Fiber针对React组件对调用栈进行了部分重写；使其变为一个链表结构；

特点

React Fiber引入的目的是为了增强动画、布局等实时性要求高的任务的稳定性；

  1. 主要特点是增量渲染（incremental rendering）—— 即可以把渲染工作进行切片，并在多帧内的空闲时间完成渲染工作；
  2. 为不同的更新任务分配不同的优先级，根据优先级的高低优先执行；
  3. 任务的暂停与恢复；
  4. 重用已完成的任务；
  5. 终止不再需要的任务；
  6. 当新的任务进来时，旧的任务可以被暂停、终止或重用；如果新任务优先级更高，则挂起旧任务并优先执行新任务；
Fiber node structure

React Fiber的每个节点都是一个对象fiber，其数据结构表示为：

class Node {
    constructor(instance) {
        this.instance = instance;
        this.child = null;
        this.sibling = null;
        this.return = null;
    }
}

区别于React Fiber，fiber是一个组件输入/输出信息的对象，可以看作一个虚拟的stack frame；每个React元素都有一个对应的fiber，它包含以下属性：

  • type和key：用途与组件类似，

    Conceptually, the type is the function (as in v = f(d)) whose execution is being tracked by the stack frame.
    Along with the type, the key is used during reconciliation to determine whether the fiber can be reused.
    翻译： 通常，type是一个函数，该函数的执行用于追踪栈帧；key通常用于在reconciliation阶段判断该fiber是否可以重用；

  • child和sibling：用于指向其他fibers；child通常是组件render方法的返回值；sibling是render方法返回的顶层元素（数组形式，此时child为数组首元素；Fiber支持render函数中返回多个元素）

    function Parent() {
  return [<Child1 />, <Child2 />]
}
// child是Child1， siblings是Child1和Child2

  • return：reference to the parent

  • output：每一个fiber最终都有output，但是output只在一些Host Components（DOM节点）中产生；这些输出最终给Renderer用于应用更新；

举例说明，定义一个组件ClickCounter：

class ClickCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {count: 0};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState((state) => {
            return {count: state.count + 1};
        });
    }


    render() {
        return [
            <button key="1" onClick={this.handleClick}>Update counter</button>,
            <span key="2">{this.state.count}</span>
        ]
    }
}

这里，ClickCounter组件对应的fiber node的数据结构：

{
    stateNode: new ClickCounter,
    type: ClickCounter,
    alternate: null,
    key: null,
    updateQueue: null,
    memoizedState: {count: 0},
    pendingProps: {},
    memoizedProps: {},
    tag: 1,
    effectTag: 0,
    nextEffect: null
}

spanDOM节点

{
    stateNode: new HTMLSpanElement,
    type: "span",
    alternate: null,
    key: "2",
    updateQueue: null,
    memoizedState: null,
    pendingProps: {children: 0},
    memoizedProps: {children: 0},
    tag: 5,
    effectTag: 0,
    nextEffect: null
}

React Fiber基于新的浏览器API—— requestIdleCallback和requestAnimationFrame进行实现；
requestIdleCallback调度一个低优先级的函数在浏览器空闲时间执行；
requestAnimationFrame调度一个高优先级的函数在下一个动画帧中执行；

参考文献

  1. react-fiber-architecture
  2. Reconciliation
  3. react basic
  4. Design Principles
  5. fiber-reconciler
  6. The how and why on React’s usage of linked list in Fiber to walk the component’s tree
  7. React生命周期速查表
  8. React.Components
  9. Refs转发
  10. 可渲染的React元素
Neil-
关注
专栏目录
React18 新特性解读 & 完整版升级指南
老司机的后备箱
06-10 2167
已经放弃了对 的支持，将于 停止支持 ，如需兼容，需要回退到 版本。 升级 新项目： 直接用 或者 安装最新版依赖即可（如果是js，可以不需要安装types类型声明文件） 旧项目： 先把依赖中的版本号改成最新，然后删掉 文件夹，重新安装： 新特性 一、 Render API 为了更好的管理， 引入了一个新的 ，新的 还支持 （并发模式的渲染），它允许你进入（并发模式）。 同时，在卸载组件时，我们也需要将 升级为 : tips：我们如果在 中使用旧的 ，在项目启动后，你将会在控制
React新版扩展特性
暗武逢天的博客
06-06 636
可以看到useSearchParams和useLocation都可以取到参数,区别就是useSearchParams解构得到的是map类型的参数和更改参数的方法,useLocation得到的是参数拼接的字符串,如果想要使用参数还需要进一步的解析字符串。之前router5版本中如果想让一般组件也有路由组件的history的话是需要使用withOutr标签的,6版本的路由不需要这么麻烦,也是直接使用useNavigate就可以解决。
React v16.6 新特性介绍
weixin_34004750的博客
10-30 214
更多技术文章，可以浏览我的github地址，github.com/HuYuee/blog 原英文链接 10月23日，React发布了16.6版本，在此版本中带来了一些非常有用的新特性。主要的新特性包括: React.memo() React.lazy() static contextType() static getDerivedStateFromError() React...
react有那些新特性
爱敲代码的卡拉米的博客
09-20 589
React 是一个流行的 JavaScript 库，用于构建用户界面。以下是 React 最新版本（React 18）中引入的一些新特性和改进：1. **Concurrent Mode（并发模式）**：允许 React 应用在渲染过程中处理优先级不同的任务，提高应用的性能和响应速度。2. **Suspense（悬挂）**：通过 Suspense 组件可以更好地处理异步数据加载和代码分割，使得应用在加载数据时可以展示 loading 界面，并在数据加载完成后再显示内容。
React19来了，新特性
EvanYYY1的博客
05-28 1332
React19 新特性
react 新特性 2019
qq_31261131的博客
04-23 490
1.Time Slicing 时间分片 官方说明是可以进行异步的渲染，不会阻塞当前的线程，当cpu足够用的话，看起来是同步渲染的，当cpu很吃紧的时候，会看到有点卡顿，但不至于卡死，对于开发者透明，不影响开发过程。 原理暂时没搞明白，渲染的方式肯定还是同步的渲染下来，至少父子组件的渲染是同步，猜测是把渲染任务推到任务队列里，然后一个个去执行，如果主线程很忙就会执行频率降低，如果主线程不忙就...
新React v19特性
最新发布
weixin_58139900的博客
09-25 1395
使用异步转换的函数被称为Action（动作）。ActionPending状态：Action 提供了一个 state请求开始时，代表对应的状态 -pending状态请求结束时，状态自动重置OptimisticAction支持新的hook，因此我们可以在请求提交时向用户显示即时反馈。Action提供错误处理，因此我们可以在请求失败时显示，并自动恢复Optimistic更新为其原始值。增强表单操作：元素支持将函数传递给 action 和 formAction props。传递给。
React Native框架介绍：0.45.0-rc.1新版本特性解析
- Releases.md：这个文件可能包含了关于 React Native 版本发布的历史记录，包括每个版本的新特性和变更。 - CONTRIBUTING.md：这是项目贡献指南，它提供了如何为 React Native 项目贡献代码的详细指导，包括代码的...
ant-design 4.21.3版本发布：全新React组件库特性解析
知识点详细说明： 1. 标题分析： 标题为 "ant-design-4.21.3.zip"，指的是一个 ZIP 压缩包文件，包含了特定版本的 Ant Design 组件库。Ant Design 是一个企业级的前端设计语言和 React 组件库，由阿里巴巴开源。此...
React Native 0.72.0-rc.4 新版本框架特性解析
- React Native框架对前端开发人员友好，因为它几乎不需要学习新的编程语言或平台特定的知识，即可进行移动应用开发。 2. 版本命名含义： - "0.72.0-rc.4"中的"0.72.0"表示该版本的主要版本号和次要版本号，以及...
React Native框架RC版本特性解析
- Releases.md：这是一个关于React Native项目版本发布说明的文档，通常包含每个版本的更新日志、修复的问题、新增的功能和改进点等信息。 - README.md：这是项目的主要文档文件，为开发者提供了如何开始使用React ...
react 18新特性 了解一下
lucky569的博客
08-29 2087
新版本react18 坐了哪些更改
关于React16版本新增特性（笔记）
qq_18283943的博客
05-18 985
简单笔记react 16.0.01.支持数组和字符串render；2.Error boundary（错误边界）3.Fiber核心算法的实现react 16.1.01.callReturnreact 16.2.01.Fragmentreact 16.3.01.context API2.生命周期的更新变动3.createRef/forwordRef;4.StrictModereact 16.4.01.Pointer Events APIreact 16.5.0React Profilerreact 16.6.0
React 19 新特性集合
CamilleZJ的博客
06-25 1298
react 19新特性介绍
React19 新特性 – 附带代码示例的更新
晓风晓浪
04-03 3007
🤖 React 编译器：React 正在努力实现一个新的编译器。目前，Instagram 已经在利用这项技术，它将在未来版本的 React 中发布。🔥 服务器组件：经过多年的开发，React 引入了服务器组件的概念。您现在可以在 Next.js 中使用此功能。💪 动作：动作还将彻底改变我们与 DOM 元素的交互方式。🌇 文档元数据：另一个急需改进的方面即将到来，使开发人员能够用更少的代码实现更多功能。💼 资源加载：这将使资源能够在后台加载，从而改善应用程序的加载时间和用户体验。
深度解析 React 19 新特性及 Suspense 行为变化的影响
qq_42120268的博客
07-01 1007
React 19 引入了全新的“use”API，使得在组件中更简便地进行状态管理和副作用处理。通过该 API，开发者可以减少代码冗余，提高代码的可读性和维护性。React 19 的发布为前端开发带来了诸多新特性和改进，但 Suspense 行为的变化也引发了广泛讨论。在实际应用中，开发者需要根据具体情况调整数据获取策略，以优化性能并提升用户体验。未来，随着 React 团队对这些变化的进一步完善和调整，相信会有更多优化方案和最佳实践涌现。
React详解（包含新旧版本）
m0_55557411的博客
01-31 3431
React详解（包含新旧版本）最适合初学者，每个知识点包含图解，代码
React 19 即将迎来大更新！
weixin_45727472的博客
02-21 1084
公众号: 程序员白特，欢迎一起交流学习~近日，React团队发布消息称，不会再发布v18.3版本了，而是将重点放在React v19版本。新版本将推出四个新的hook，旨在解决React虽然这些hook目前作为实验性API在React预览版本中可用，但它们预计将成为React 19的稳定功能，但是最终发布React v19之前，API 可能会有所变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Neil-

你们的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值