react render 的原理和触发时机

react render 的原理和触发时机

理解react的render函数,要从这三点来认识。原理、执行时机、总结。

一、原理

在类组件和函数组件中,render函数的形式是不同的。

类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件。

  1. class Foo extends React.Component {

  2.     render() { //类组件中

  3.         return <h1> Foo </h1>;

  4.     }

  5. }

 

  1. function Foo() {  //函数组件中

  2.     return <h1> Foo </h1>;

  3. }

 在render函数中的jsx语句会被编译成我们熟悉的js代码

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>
    );
  }

}

 函数组件通过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

三、总结:

render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM

在React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render

组件的props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state

在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染

所以,一旦执行了setState就会执行render方法,useState 会判断当前值有无发生改变确定是否执行render方法,一旦父组件发生渲染,子组件也会渲染

上一篇:svn: is already a working copy for a different url 解决办法


下一篇:.Net Core 3.0开源可视化设计CMS内容管理系统建站系统