当前位置：首页 > news >正文

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

news 2025/9/18 14:47:04

一、原理

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

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

class Foo extends React.Component {render() {return <div> Foo </div>;}
}

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

function Foo() {return <div> Foo </div>;
}

在render中，我们会编写jsx，jsx通过babel编译后就会转化成我们熟悉的js格式，如下：

return (<div className='cn'><Header> hello </Header><div> start </div>Right Reserve</div>
)

babel编译后：

return (React.createElement('div',{className : 'cn'},React.createElement(Header,null,'hello'),React.createElement('div',null,'start'),'Right Reserve')
)

从名字上来看，createElement方法用来元素的

在react中，这个元素就是虚拟DOM树的节点，接收三个参数：

type：标签
attributes：标签属性，若无则为null
children：标签的子节点

这些虚拟DOM树最终会渲染成真实DOM

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

二、触发时机

render的执行时机主要分成了两部分：

类组件调用 setState 修改状态

class Foo extends React.Component {state = { count: 0 };increment = () => {const { count } = this.state;const newCount = count < 10 ? count + 1 : count;this.setState({ count: newCount });};render() {const { count } = this.state;console.log("Foo render");return (<div><h1> {count} </h1><button onClick={this.increment}>Increment</button></div>);}
}

点击按钮，则调用setState方法，无论count发生变化辩护，控制台都会输出Foo render，证明render执行了

函数组件通过useState hook修改状态

function Foo() {const [count, setCount] = useState(0);function increment() {const newCount = count < 10 ? count + 1 : count;setCount(newCount);}console.log("Foo render");return (<div><h1> {count} </h1><button onClick={increment}>Increment</button></div>);
}

函数组件通过useState这种形式更新数据，当数组的值不发生改变了，就不会触发render