五大知识点带你梳理react进阶知识

• ✉️前言
• 📧一、props
• • 1、PropTypes与DefaultProps应用
  • • （1）PropTypes
    • （2）defaultProps
  • 2、props，state与render函数
• 📨二、React中的虚拟DOM
• • 1、什么是虚拟DOM
  • • （1）第一种方案
    • （2）第二种方案
    • （3）第三种方案
  • 2、虚拟DOM中的 Diff 算法
• 📩三、React中ref的使用
• 📦四、React中的生命周期
• • 1、生命周期函数是什么
  • 2、生命周期图例
• 📪五、React中使用CSS动画效果
• • 1、普通用法
  • 2、react-transition-group
  • • （1）初次探索
    • （2）进阶探索
• 📮六、结束语
• 🗳️彩蛋

✉️前言

对于 react 的表层来说，我们可能经常听说的是声明式开发、单向数据流、组件化方式开发等等。那么，进一步来讲的话，我们还需要了解的是 react 的 props ，虚拟 DOM 、 ref 以及过渡动画等更多新的知识点。

那在下面的这篇文章中，将来探索关于 react 的进阶知识。

叮，下面开始本文的介绍~🤪

📧一、props

1、PropTypes与DefaultProps应用

（1）PropTypes

在 react 中，有时候我们要对组件中的某个属性进行格式校验，这个时候我们就需要用到 propTypes 。下面给出一些常见的例子：

// 表示要对TodoItem这个组件做属性的校验 TodoItem.propTypes = {// isRequired 表示必须有值test: PropTypes.string.isRequired,// 表示content的propTypes必须是string类型，那string类型的校验是从PropTypes这个包里面拿到的content: PropTypes.string,// 表示detail可以是一个number或者string的语法detail: PropTypes.arrayOf(PropTypes.number, PropTypes.string),// 表示deleteItem必须是一个函数deleteItem: PropTypes.func,// 表示index必须是一个数字类型index: PropTypes.number }

（2）defaultProps

有时候，对于某个属性来说，我们希望给它个初始值，那这个时候就需要用到 defaultProps 。示例如下：

TodoItem.defaultProps = {test: 'hello world' }

上面的代码表明，当 test 属性没有被赋值时，那么它将被赋予一个初始值，值为 hello world 。

2、props，state与render函数

在 react 中，定义一个组件时，经常会看到 props 、 state 和 render 。那他们三者是怎么样的关系呢？

首先我们要想一个问题：为什么数据发生变化，页面就会跟着变化呢？

原因在于，页面是由 render 函数渲染出来的，当数据 state 发生变化时， render 函数就会被重新的执行一次。

同时，当父组件的 render 函数被运行时，它的子组件的 render 都将被重新运行。

📨二、React中的虚拟DOM

1、什么是虚拟DOM

（1）第一种方案

传统实现虚拟 DOM 的思路：

• 先定义 state ，也就是数据；
• 编写JSX 模板内容；
• 把数据和模板进行结合，生成真是的 DOM ，进而将内容显示到页面上；
• 如果遇到要替换数据时，则把数据和模板进行结合，生成真实的 DOM ，来替换原始的 DOM 。

存在缺陷：

• 第一次生成了一个完整的 DOM 片段；
• 第二次又生成了一个完整的 DOM 片段；
• 第二次的 DOM 替换第一次的 DOM ，非常耗费性能。

（2）第二种方案

传统实现虚拟 DOM 的思路改进版：

• 先定义 state ，即数据；
• 编写 JSX 模板内容；
• 把数据和模板进行结合，生成真实的 DOM ，并展示；
• 当 state 的数据发生改变；
• 继续，把数据和模板进行结合，生成真实的 DOM ，并不是直接替换原始的 DOM
• 将新的 DOM 和原始的 DOM 做比较，并找出差异；
• 找到新的 Dom 中发生的变化；
• 只用新的 DOM 中变化的数据，来替换掉老的 DOM 中的数据。

存在缺陷：

• 性能的提升并不明显

（3）第三种方案

react 中实现虚拟 DOM 的思路：

• 先定义 state ，即数据；

• 编写 JSX 模板内容；

• 把数据和模板进行结合，生成虚拟 DOM （虚拟 DOM 就是一个 JS 对象，用它来描述真实 DOM ）。👉（损耗了性能）

  <div id="abc"><span>hello world</span></div> ['div', {id: 'abc'}, ['span', {}, 'hello world']]

• 用虚拟 DOM 的结构生成真实的 DOM ，来进行显示；

• 当 state 发生变化时，数据 + 模板生成新的虚拟 DOM ；👉（极大的提升了性能）

<div id="abc"><span>monday</span></div> ['div', {id: 'abc'}, ['span', {}, 'monday']]

• 比较 原始虚拟 DOM 和 新的虚拟 DOM 的区别，找到其中的区别是 span 中的内容；
• 直接操作 DOM ，改变 span 的内容；
• 因此， React 的虚拟 DOM 主要经历的过程是： JSX → createElement → 虚拟 DOM （ JS 对象 ）→ 真实的 DOM 。

react 虚拟 DOM 的优点：

• 极大的提升了性能；
• 它使得跨端应用得以实现，这要谈到 react 中的一个概念，react native ；
• react 使用可以编写原生应用，像 Android 和 IOS 开发，这些都是操作真实 DOM ；
• 而 react 使得编写这些原生应用得以使用。

2、虚拟DOM中的 Diff 算法

• react 对 setState 的性能优化，它会把多次 setState 结合成一次 setState ；
• 虚拟 DOM 使用 diff 算法做比较，只在同层做比较，不跨级做比较；
• 同层比对的算法比较简单，而算法简单带来的直接好处就是速度非常快；
• 虽然可能会造成 DOM 渲染上的一些浪费，但是呢，它也极大的减少了两个虚拟 DOM 之间进行比较时，性能上的消耗。

📩三、React中ref的使用

react 中建议的是，希望我们可以用数据驱动的形式来编写代码，尽量不要操作 DOM 。但有时候，我们在做一些极其复杂业务的时候，比如各种震撼动画，不可避免的还是会用到一些原生的 DOM 标签。因此， ref 帮助我们在 react 中直接获取 DOM 元素的时候来进行使用。

一般情况下，我们尽量不使用 ref 。如果用 ref 时，会出现各种各样的问题。同时，当使用 ref 和 setState 时，要注意一些存在的坑。

比如，当 ref 与 setState 相关联使用时，要注意， setState 是一个异步函数，往往会在同步代码执行完毕后再执行异步代码。因此，如果我们希望同步代码执行顺序在 setState 之后时，可以在 setState 接受的第二个参数中，再增加一个回调函数来进行调用，这样就可以达到我们的效果啦！

render() {return (<ul ref={(ul) => this.ul = ul}>{this.getTodoItem()}</ul>) }this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: '' }), () => {console.log(this.ul.querySelectorAll('div').length) });

📦四、React中的生命周期

1、生命周期函数是什么

所谓生命周期函数，指的是在某一个时刻，组件会自动调用执行的函数。那 react 的生命周期都有哪一些呢？

阶段生命周期含义

Mounting	componentWillMount	①当组件即将被挂载到页面的时刻时自动执行，即在页面挂在之前执行；②只在组件被第一次挂在到页面上才会执行；
Mounting/Updation	render	页面挂载时被执行
Mounting	componentDidMount	会在组件被挂载到页面之后，自动被执行；只在组件被第一次挂在到页面上才会执行
Updation	componentWillReceiveProps	①当一个组件从父组件接收参数；②只要父组件的render函数被执行了，子组件的这个生命周期函数就会被执行；③如果这个组件第一次存在于父组件中，不会执行；④如果这个组件之前已经存在于父组件中，才会被执行；
Updation	componentWillUpdate	①组件被更新之前，她会自动执行；②但是它是在shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回true时，它才执行；如果返回false，这个函数就不会被执行了。
Updation	componentDidUpdate	组件更新完成之后，它会被执行。
Updation	shouldComponentUpdate	组件被更新之前，它会被自动被执行；此生命周期返回一个布尔值
Unmounting	componentWillUnmount	当这个组件即将被从页面中剔除的时候，会被执行。

2、生命周期图例

下面用一张图来展示 react 中生命周期的执行效果：

📪五、React中使用CSS动画效果

1、普通用法

我们来看一下，在 react 中，如何使用 css3 所提供的动画效果。具体代码如下：

.show {animation: show-item 2s ease-in forwards; }.hide {animation: hide-item 2s wase-in forwards; }@keyframes show-item {0% {oppacity: 0;color: red;}50% {opacity: 0.5;color: green;}100% {opacity: 1;color: blue;} }

2、react-transition-group

（1）初次探索

有时候，我们可能会想要实现一些很复杂的动画，这个时候 css3 提供的是不够的。因此，我们还需要一点 js 来加以辅助实现更为复杂的动画。这个时候就有谈到 react 中的 react-transition-group 动画。

假设我们想要实现，当点击一个按钮时，一行文字渐隐渐显的实现，那该怎么处理呢？

首先，我们在项目的 src 文件夹下新增一个组件，命名为 App.js 。具体代码如下：

import React, { Component, Fragment } from 'react'; import { CSSTransition } from 'react-transition-group'; import './style.css';class App extends Component {constructor(props) {super(props);this.state = {show: true}this.handleToggle = this.handleToggle.bind(this);}render() {return (<Fragment>{/* onEntered指的是在某一个时刻会自动执行的一个函数当入场动画结束时，onEntered将会被执行*/}<CSSTransitionin={this.state.show}timeout={1000}classNames='fade'unmountOnExitonEntered={(el) => { el.style.color = "blue" }}appear={true}><div>hello</div></CSSTransition><button onClick={this.handleToggle}>toggle</button></Fragment>)}handleToggle() {this.setState({show: this.state.show ? false : true})} }export default App;

之后新增一个 CSS 文件，命名为 style.css 。具体代码如下：

/* 入场动画执行的第一个时刻，即刚要入场的这个瞬间 */ /* fade-appear用于实现渐隐渐现的效果 */ .fade-enter, .fade-appear {opacity: 0; }/* 入场动画执行的第二个时刻，到入场动画执行完成之前的一个时刻 */ .fade-enter-active, .fade-appear-active {opacity: 1;transition: opacity 1s ease-in; }/* 当整个入场动画执行完成之后 */ .fade-enter-done {opacity: 1; }/* 表示出场动画执行的第一个时刻 */ .fade-exit {opacity: 1; }/* 整个出场的过程 */ .fade-exit-active {opacity: 0;transition: opacity 1s ease-in; }/* 当整个出场动画执行完成时 */ .fade-exit-done { }

此时我们来看下浏览器的显示效果：

（2）进阶探索

上面我们只是改变了一项数据。现在，如果我们想要点击就新增一项过渡效果，这又该如何处理呢？

我们来改造下 App.js 文件的代码。具体代码如下：

import React, { Component, Fragment } from 'react'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import './style.css';class App extends Component {constructor(props) {super(props);this.state = {show: true,list: []}this.handleToggle = this.handleToggle.bind(this);}render() {return (<Fragment>{/* onEntered指的是在某一个时刻会自动执行的一个函数当入场动画结束时，onEntered将会被执行*/}<TransitionGroup>{this.state.list.map((item, index) => {return (<CSSTransitionin={this.state.show}timeout={1000}classNames='fade'unmountOnExitonEntered={(el) => { el.style.color = "blue" }}appear={true}key={index}><div>{item}</div></CSSTransition>)})}</TransitionGroup><button onClick={this.handleToggle}>toggle</button></Fragment>)}handleToggle() {this.setState((prevState) => {return {list: [...prevState.list, 'item']}})} }export default App;

此时浏览器的运行效果如下：

对于这种类型的动画来说，我们通过 TransitionGroup 对外层进行包裹，之后通过 CSSTransition 对里层进行包裹，进而达到我们最终的效果。

📮六、结束语

在上面这篇文章中，我们讲解了 react 中的 props ，同时，还简单的了解了虚拟 DOM 的内容。除此之外呢，还学习了 ref 的使用，以及 react 中的酷炫的过渡动画。当然，最为重要的一点是， react 中的生命周期函数。

那到这里， react 的进阶知识讲到这里就结束了。不知道小伙伴们对 react 是否又有进一步的认识呢？

🗳️彩蛋

• 关注公众号星期一研究室，第一时间关注优质文章，更有面试专栏待你解锁~
• 如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😉
• 以上就是本文的全部内容！我们下期见！🥂🥂🥂

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的react只停留在表层？五大知识点带你梳理进阶知识的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。