说说React render方法的原理？在什么时候会被触发？

最新推荐文章于 2023-09-11 09:35:09 发布

夏兮颜☆

最新推荐文章于 2023-09-11 09:35:09 发布

阅读量180

点赞数 1

分类专栏： react 文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/m0_69892739/article/details/128560504

版权

16 篇文章 1 订阅

订阅专栏

原理

首先，render函数在react中有两种形式：

在类组件中，指的是render方法：

class Index extends React.Component {
    render() {
        return <h1> index</h1>;
    }
}

在函数组件中，指的是函数组件本身：

function Index() {
    return <h1> index</h1>;
}

在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树。

render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM
在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render
组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state
在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染。
所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染

关注