react性能优化之组件render优化

最新推荐文章于 2024-08-08 11:34:48 发布
最新推荐文章于 2024-08-08 11:34:48 发布
阅读量410 收藏
点赞数
分类专栏： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013165804/article/details/114114509
版权

举个例子说明，父组件触发 render，无论子组件使用到父组件的 state 作为 props 值是否改变，甚至无论子组件是否使用到父组件的 state，都会触发子组件 render

class ChildOne extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const {value} = this.props;
        console.log('触发子组件 ChildOne 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildOne</p>
                <div> 父组件传入 props 数据{value}</div>
            </div>
        );
    }
}

class ChildTwo extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        console.log('触发子组件 ChildTwo 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildTwo</p>
            </div>
        );
    }
}

class App extends React.Component {
    state = {
        value: 1,
    };

    handleClick = () => {
        this.setState({
            value: 1
        });
    };

    render() {
        console.log('触发父组件的 render')
        return (
            <React.Fragment>
                <div className="box">
                    <div>{this.state.value}</div>
                    <button onClick={this.handleClick}>+</button>
                </div>
                <ChildOne value={this.state.value}/>
                <ChildTwo/>
            </React.Fragment>
        );
    }
}

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

对于 react 的 class 组件，我们可以使用 PureComponent 处理基本数据类型

class ChildOne extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        const {value} = this.props;
        console.log('触发子组件 ChildOne 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildOne</p>
                <div> 父组件传入 props 数据{value}</div>
            </div>
        );
    }
}

class ChildTwo extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        console.log('触发子组件 ChildTwo 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildTwo</p>
            </div>
        );
    }
}

class App extends React.Component {
    state = {
        value: 1,
    };

    handleClick = () => {
        this.setState({
            value: 1
        });
    };

    render() {
        console.log('触发父组件的 render')
        return (
            <React.Fragment>
                <div className="box">
                    <div>{this.state.value}</div>
                    <button onClick={this.handleClick}>+</button>
                </div>
                <ChildOne value={this.state.value}/>
                <ChildTwo/>
            </React.Fragment>
        );
    }
}

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

PureComponent，浅比较只能比较基本数据类型的异同，如果传入的 props 是复杂数据类型 子组件render仍然会触发 举个例子

class ChildOne extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    render() {
        const {value} = this.props;
        console.log('触发子组件 ChildOne 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildOne</p>
                <div> 父组件传入 props 数据{value.number}</div>
            </div>
        );
    }
}

class App extends React.Component {
    state = {
        value: {
            number: 1,
        }
    };

    handleClick = () => {
        this.setState({
            value: {
                number: 1
            }
        });
    };

    render() {
        console.log('触发父组件的 render')
        return (
            <React.Fragment>
                <div className="box">
                    <div>{this.state.value.number}</div>
                    <button onClick={this.handleClick}>+</button>
                </div>
                <ChildOne value={this.state.value}/>
            </React.Fragment>
        );
    }
}

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

shouldComponentUpdate 处理复杂数据类型

class ChildOne extends React.Component {
    constructor(props) {
        super(props)
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('nextProps', nextProps)
        console.log('this.props', this.props)
        return nextProps.value.number !== this.props.value.number
    }

    render() {
        console.log('触发子组件 ChildTwo 的 render')
        return (
            <div className="box">
                <p> 子组件 ChildTwo</p>
            </div>
        );
    }
}

class App extends React.Component {
    state = {
        value: {
            number: 1,
        }
    };

    handleClick = () => {
        this.setState({
            value: {
                number: 1
            }
        });
    };

    render() {
        console.log('触发父组件的 render')
        return (
            <React.Fragment>
                <div className="box">
                    <div>{this.state.value.number}</div>
                    <button onClick={this.handleClick}>+</button>
                </div>
                <ChildOne value={this.state.value}/>
            </React.Fragment>
        );
    }
}

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

前面是 class 组件的优化方式，那么对于函数式组件，我们又该如何处理呢？
react 很贴心的提供了 React.memo() 高阶组件，他的功能与 PureComponent 类似： 以下例子 ChildOne 触发render ChildTwo 不触发render

const ChildOne = props => {
  console.log('触发子组件 ChildOne 的 render')
  return (
      <div className="box">
          <p> 子组件 ChildOne</p>
          <div> 父组件传入 props 数据{props.value.number}</div>
      </div>
  )
};

const ChildTwo = React.memo(() => {
  console.log('触发子组件 ChildTwo 的 render')
  return (
      <div className="box">
          <p> 子组件 ChildTwo</p>
      </div>
  )
})


class Home extends React.Component {
  state = {
    value: {
      number: 1,
    },
  };

  handleClick = () => {
    this.setState({
      value: {
        number: 1,
      },
    });
  };

  componentDidMount() {}
  render() {
    // return <div className="test">Home</div>;
    console.log("触发父组件的 render");
    return (
      <React.Fragment>
      <div className="box">
          <div>{this.state.value.number}</div>
          <button onClick={this.handleClick}>+</button>
      </div>
      <ChildOne value={this.state.value}/>
      <ChildTwo/>
  </React.Fragment>
    );
  }
}

React.memo() 高阶组件处理复杂类型

const ChildOne = React.memo(props => {
    console.log('触发子组件 ChildTwo 的 render')
    return (
        <div className="box">
            <p> 子组件 ChildOne</p>
            <div> 父组件传入 props 数据{props.value.number}</div>
        </div>
    )
}, areEqual)

function areEqual(prevProps, nextProps) {
    console.log('prevProps', prevProps)
    console.log('nextProps', nextProps)
    return prevProps.value.number === nextProps.value.number
}

class App extends React.Component {
    state = {
        value: {
            number: 1,
        }
    };

    handleClick = () => {
        this.setState({
            value: {
                number: 1
            }
        });
    };

    render() {
        console.log('触发 render')
        return (
            <React.Fragment>
                <div className="box">
                    <div>{this.state.value.number}</div>
                    <button onClick={this.handleClick}>+</button>
                </div>
                <ChildOne value={this.state.value}/>
            </React.Fragment>
        );
    }
}

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

总结xmind图

在这里插入图片描述

爱lv行
关注
专栏目录
万字长文+图文并茂+全面解析 React 源码 - render 篇
qq_34621851的博客
03-22 3799
今天想了比较久的时间，准备开启这一系列的文章，旨在对 React 系列的源码进行深度解析，其中包含但不限于 react、react-dom、react-router... 等一系列优秀的 React 系列框架，最后再一一实现这些框架的简易版本。 本篇文章将会是对 react 和 react-dom 渲染过程源码的深度解析，我们将从官方 API 以及一些简易 Demo 来进入 react 的内部世界...
react性能优化——组件嵌套中的render调用问题
weixin_43933771的博客
07-18 807
当父组件的render函数被调用时，其所有的子组件的render函数都将会被重新调用，性能必然是很低的。那么它们在调用render前应该有一个前提，就是只有当所依赖的state或者props发生改变时，再去重新调用render方法。 解决方式一：当有些属性不需要render时，可以利用shouldComponentUpdate()生命周期函数，它默认返回true，将其改为false，从而阻断所有render的重新渲染。 ​ 方式一的弊端： ​ （1）只适用于类组件。 ​ （2）但是直接改为false的话
从 React render 谈谈性能优化
weixin_33858249的博客
02-23 1383
本文将从 render 函数的角度总结 React App 的优化技巧。需要提醒的是，文中将涉及 React 16.8.2 版本的内容(也即 Hooks），因此请至少了解 useState 以保证食用效果。 正文开始。 当我们讨论 React App 的性能问题时，组件的渲染速度是一个重要问题。在进入到具体优化建议之前，我们先要理解以下 3 点： 当我们在说「render」时，我们在说什么？ ...
解释 React 中 render() 的目的和作用
最新发布
My_wife_QBL的博客
08-08 732
在 React 中，render()方法是一个组件的生命周期方法，用于描述组件的 UI 应该如何呈现。这是一个必需的方法，React 通过它来决定何时更新组件的输出以及如何渲染新的 UI。render()方法是 React 组件的核心部分，它的主要作用是描述组件的 UI，并根据状态和属性的变化触发重新渲染。通过render()方法，开发者可以创建动态且响应式的用户界面。在实际应用中，合理地使用render()方法并结合条件渲染、优化技巧，可以显著提高组件的性能和用户体验。理解render()
React性能优化（以及React的render过程）
chiuwingyan的博客
05-05 1269
前言在了解React的性能优化之前，首先要对React的render过程有了解。Render对React有了解的都知道，render的渲染分为初始化渲染和更新渲染。初始化渲染就是在页面初始化的时候调用根组件下所有组件的render方法，如下图，一个DOM树表示根组件与各组件之间的联系，绿色是代表已经渲染的。现在讲的这种情况，如果我们只需要对某一个子组件进行更新，如图绿色代表的是需要更新的子组件：而...
React 之 re-render的原理和优化
localhost
12-13 1263
React 之 re-render原理探索和优化
ReactJS分析之入口函数render
weixin_30443075的博客
05-13 219
前言 在使用React进行构建应用时，我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上，将任务交给浏览器，进而进行layout和paint等步骤，这个函数就是React.render()。首先看下该函数的接口定义： ReactComponent render( ReactElement element, DOMElement container, [f...
React优化子组件render的使用
10-17
总之，React优化子组件render的使用是一个涉及多个方面的技术点，需要开发者深入理解组件渲染机制和生命周期，合理利用React提供的优化手段，同时注意组件的设计原则和性能测试，这样才能在保证应用性能的同时，保证...
React性能优化系列之减少props改变的实现方法
12-08
React性能优化的一个核心点就是减少render的次数。如果你的组件没有做过特殊的处理（SCU — shouldComponentUpdate或使用PureComponent），那每次父组件render时，子组件就会跟着一起被重新渲染。通常一个复杂的子...
react性能优化.docx
04-13
本文总结了五个 React 性能优化策略，分别是：单个 React 组件性能优化、多个 React 组件性能优化、避免使用内联函数定义、避免使用内联样式属性、避免在 componentWillMount 中进行异步请求。 1. 单个 React 组件...
React.js 小书 Lesson7 - 组件的 render 方法
weixin_30505225的博客
11-10 92
作者：胡子大哈 原文链接：http://huziketang.com/books/react/lesson7 转载请注明出处，保留原文链接和作者信息。 React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的Component（还有别的编写组件的方式我们后续会提到）。...
React之render
Ming_xm的博客
10-23 482
render函数里面可以编写JSX，转化成这种形式，用于生成虚拟DOM，最终转化成真实DOM在React中，类组件只要执行了setState方法，就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新render组件的props改变了，不一定触发render函数的执行，但是如果props的值来自于父组件或者祖先组件的state在这种情况下，父组件或者祖先组件的state发生了改变，就会导致子组件的重新渲染所以，一旦执行了setState就会执行render方法，
React-----学习笔记-----组件的render方法(四)
johnnyrt的博客
08-05 1353
一个组件类必须要实现render方法，render方法必须要返回jsx元素，必须要用一个外层的 JSX元素把所有内容包裹起来。返回并列多个JSX元素是不合法的: 错误示例： ... render () { return ( &lt;div&gt;first&lt;/div&gt; &lt;div&gt;second&lt;/div&gt; ) } ... 必须...
React中的render()
热门推荐
Han_Zhou_Z的博客
03-07 1万+
一、React中的render() 1、render()：是 class 组件中唯一必须实现的方法 2、当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一： （1）React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /&g
react Render机制
LittleMoon_lyy的博客
01-28 1165
react Render机制
面试官：说说React render方法的原理？在什么时候会被触发？
weixin_44475093的博客
07-26 1449
一、原理首先，render函数在react中有两种形式：在类组件中，指的是render方法：classFooextendsReact.Component{ render()...
react组件学习——render组件
AndrewPerfect的博客
07-30 407
类组件中的render方法：用于描述 UI 如何渲染，返回 JSX。函数组件：通过返回 JSX 来描述 UI。重要特性：纯函数、不修改状态、返回单一根元素。条件渲染：使用条件语句根据不同情况渲染不同内容。列表渲染：通过数组的map方法渲染列表项。使用其他组件：组合其他组件以构建复杂 UI。通过理解和使用render方法，你可以创建动态和交互丰富的 React 应用。
react render的作用
zzx262625的博客
10-17 741
方法，我们可以将组件定义的虚拟 DOM 渲染成真实的 DOM，并且在数据发生变化时自动更新界面。方法接收两个参数：要渲染的组件（或者是 React 元素）和目标容器元素，然后将组件渲染到指定的容器中。创建组件：创建一个 React 组件，可以是函数式组件或者类组件。方法是 React 库中最重要的方法之一，它用于将 React 组件渲染到浏览器中的 DOM。方法负责将组件呈现到页面上，当组件的状态或属性发生变化时，React 会重新调用。方法是将 React 组件渲染到 DOM 中的关键方法。
React性能优化策略：组件与DOM树优化详解
总结来说，React性能优化的关键在于精简`render`方法、合理使用`key`属性以及避免不必要的函数创建。通过遵循这些原则，可以显著提高React应用的响应速度和整体性能，确保为用户提供流畅的交互体验。同时，随着React...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值