React中关于render()的用法及说明

目录
  • React中的render()
    • 1、render()
    • 2、当 render 被调用时
    • 3、render() 函数应该为纯函数
    • 4、如需与浏览器进行交互
    • 5、在React.Component类
    • 6、在react中触发render的有4条路径
    • 7、生命周期流程图（来源于官网）
  • React render在什么时候会被触发？
  • 总结

React中的render()

1、render()

是 class 组件中唯一必须实现的方法

2、当 render 被调用时

它会检查 this.props 和 this.state 的变化并返回以下类型之一：

（1）React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。

（2）数组或 fragments。 使得 render 方法可以返回多个元素。

（3）Portals。可以渲染子节点到不同的 DOM 子树中。

（4）字符串或数值类型。它们在 DOM 中会被渲染为文本节点

（5）布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)

3、render() 函数应该为纯函数

这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

4、如需与浏览器进行交互

请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易使用、维护。

5、在React.Component类

的子类中会重新定义(实现)

6、在react中触发render的有4条路径

以下假设shouldComponentUpdate都是按照默认返回true的方式。

（1）首次渲染Initial Render

（2）调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）

（3）父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）

（4）调用this.forceUpdate

7、生命周期流程图（来源于官网）

注意：如果在shouldComponentUpdate里面返回false可以提前退出更新路径

React render在什么时候会被触发？

在 React 中，只要执行了 setState 方法，就一定会触发 render 函数执行；

组件的 props 改变了，不一定触发 render 函数的执行，除非 props 的值来自于父组件或者祖先组件的 state

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

  • React中的render何时执行过程

    我们都知道Render在组件实例化和存在期时都会被执行.实例化在componentWillMount执行完成后就会被执行,这个没什么好说的.在这里我们主要分析存在期组件更新时的执行. 存在期的方法包含: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate 这些方法会在组件的状态或者属性发生发生变化时被执行,如果我们使用了Redux,那么就只有

  • 谈谈React中的Render Props模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能. 简要介绍:分离UI与业务的方法一直在演进,从早期的mixins,到HOC,再到Render Prop,本文主要对比HOC,谈谈Render Props 1 . 早期的mixins 早期复用业务通过mixins来实现,比如组件A和组件B中,有一些公用函数,通过mixins剥离这些公用部分,并

  • React中关于render()的用法及说明

    目录 React中的render() 1.render() 2.当 render 被调用时 3.render() 函数应该为纯函数 4.如需与浏览器进行交互 5.在React.Component类 6.在react中触发render的有4条路径 7.生命周期流程图(来源于官网) React render在什么时候会被触发? 总结 React中的render() 1.render() 是 class 组件中唯一必须实现的方法 2.当 render 被调用时 它会检查 this.props 和 th

  • React中使用collections时key的重要性详解

    React中使用collections时key的重要性详解

    前言 大家应该都知道,在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered,下面话不多说,来一起看看详细的介绍: React 不会 render 重复的 keys 为了彻底明白这个, 我们来声明一个这样的数组 const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的 现在, 我们在 react 中来 render <ul> {nums.ma

  • 详解Ref在React中的交叉用法

    目录 一.首先说明下什么是Ref 二.ref在hooks中的用法 1.ref在hooks中HTMLDom的用法 2.ref在hooks中与函数式组件的用法 3.ref在hooks中与类组件一同使用 4.ref在hooks中与class.react-redux一同使用 一.首先说明下什么是Ref Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但其对某些组件,尤其是可重用的组件库是很有用的 Ref官网说明:点击这里 二.ref在ho

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

    目录 简介 安装与使用 安装 准备新建一个 React 项目,安装依赖包: 使用 检测当前浏览器语言国际化组件 手动切换国际化语言 总结 本文使用 React-i18next 库结合 React, 介绍如何在 React 中配置使用国际化.官方地址:i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用:react-i18next 特点: 提供多种组件可以在hoc,

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • 关于react中useCallback的用法

    目录 基础用法 父组件 子组件 useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与useState的用法基本一致,但最后会返回一个函数,用一个变量保存起来. 返回的函数a会根据b的变化而变化,如果b始终未发生变化,a也不会重新生成,避免函数在不必要的情况下更新. 记得子组件导出时使用memo包裹一下,其作用是对组件前后两次进行浅对比,阻止不必要的更新

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

随机推荐