React之render

一、原理

首先,render函数在react中有两种形式:

在类组件中,指的是render方法:

复制代码
class Foo extends React.Component {
    render() {
        return <h1> Foo </h1>;
    }
}

在函数组件中,指的是函数组件本身:

复制代码
function Foo() {
    return <h1> Foo </h1>;
}

render中,我们会编写jsxjsx通过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

  • 类组件重新渲染

    class App extends React.Component {
    state = { name: "App" };
    render() {
    return (


    <Foo />
    <button onClick={() => this.setState({ name: "App" })}>
    Change name
    </button>

    );
    }
    }

    function Foo() {
    console.log("Foo render");

    复制代码
    return (
      <div>
        <h1> Foo </h1>
      </div>
    );

    }

只要点击了 App 组件内的 Change name 按钮,不管 Foo 具体实现是什么,都会被重新render渲染

  • 函数组件重新渲染

    function App(){
    const [name,setName] = useState('App')

    复制代码
      return (
          <div className="App">
              <Foo />
              <button onClick={() => setName("aaa")}>
                  { name }
              </button>
        </div>
      )

    }

    function Foo() {
    console.log("Foo render");

    复制代码
    return (
      <div>
        <h1> Foo </h1>
      </div>
    );

    }

可以发现,使用useState来更新状态的时候,只有首次会触发Foo render,后面并不会导致Foo render

三、总结

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

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

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

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

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

相关推荐
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy6 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20506 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端6 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿6 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL6 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉6 小时前
Vue组件化开发介绍
前端·javascript·vue.js