面试官:render在什么时候会被触发?

在 React 中,组件的 render 方法是在以下情况下被触发的:组件挂载、组件状态或属性更新、父组件重新渲染、调用 forceUpdate、组件初始化和卸载,hook的调用。 本文将总结render 方法的触发时机以及在每种情况下的应用场景和使用方式。

初始渲染

当组件首次被挂载到DOM中时,render方法会被调用来生成初始的UI结构,通常发生在componentDidMount生命周期方法之前。

import React from 'react';

class ExampleComponent extends React.Component {
  componentDidMount() {
    console.log('Component did mount!');
  }

  render() {
    console.log('Render method executed!');
    return <div>Component mounted!</div>;
  }
}

export default ExampleComponent;

componentDidMount表示ui的挂载完成,render是在挂载ui,所以可以看到render是比componentDidMount先执行的

面试官:render在什么时候会被触发?

props或state的变化

如果组件的props或state发生变化,React会重新调用render方法来根据新的props和state生成新的UI结构。这样可以确保组件能够根据外部数据的变化及时更新UI。

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
  console.log('Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Increase Count</button>
        <div>Count: {this.state.count}</div>
      </div>
    );
  }
}

export default ExampleComponent;

面试官:render在什么时候会被触发?

初始化渲染的时候render了一次,当再去调用函数通过setState去改变state的时候,render会再次调用

父组件重新渲染

如果组件的父组件重新渲染,或者父组件的props发生变化,可能会导致子组件的render方法被调用,去生成新的UI结构。

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentCount: 0
    };
  }

  handleClick = () => {
    this.setState({ parentCount: this.state.parentCount + 1 });
  }

  render() {
  console.log('Parent Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Increase Parent Count</button>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
  console.log('Child Render method executed!');
    return <div>Child component</div>;
  }
}

export default ParentComponent;

面试官:render在什么时候会被触发?

第一次渲染的时候父子的render都会触发,当我们去点击增加函数的时候,随着父组件的render触发,子组件的render也会进行触发。

强制更新

在某些情况下,可能需要手动触发组件的重新渲染。可以使用forceUpdate方法来强制触发组件的render方法,即使组件的props和state没有发生变化。

import React from 'react';

class ExampleComponent extends React.Component {
  handleClick = () => {
    this.forceUpdate();
  }

  render() {
    console.log('Parent Render method executed!');
    return (
      <div>
        <button onClick={this.handleClick}>Force Update Component</button>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    console.log('Child Render method executed!');
    return <div>Component will be forced to update!</div>;
  }
}

export default ExampleComponent;

面试官:render在什么时候会被触发?

使用React Hooks时的变化

当使用React Hooks(如useStateuseEffect等)时,组件内部的状态发生变化或触发副作用时,也会导致组件的render方法被调用。

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  console.log('Render method executed!');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

export default ExampleComponent;

面试官:render在什么时候会被触发?

函数组件中的 return 语句可以被视为相当于类组件中的 render 方法。在函数组件中,return 语句用于返回 JSX 元素,定义了函数组件要渲染的内容。当函数组件被调用时,它会执行函数体内的代码,并返回 return 语句的内容,这个内容会被 React 渲染成真实的 DOM 元素。

函数组件中return就相当于render的操作,可以看到当我们使用钩子函数的时候,每次对state的改变,也会触发整个函数的render。

总结

render在初始化和state的改变时候会触发,当render在子组件中的时候,父组件的更新和强制更新都会触发render,并且在函数组件中,retrun相当于render,当调用useState等hooks的时候会触发render。

如果觉得有趣或有收获,请关注我的更新,给个喜欢和分享。您的支持是我写作的最大动力!

往期好文推荐

原文链接:https://juejin.cn/post/7340204792810389513 作者:一只大加号

(0)
上一篇 2024年2月28日 下午5:04
下一篇 2024年2月28日 下午5:14

相关推荐

发表回复

登录后才能评论