React中子组件什么时候会触发render

最新推荐文章于 2024-01-31 14:32:13 发布
最新推荐文章于 2024-01-31 14:32:13 发布
阅读量1.1k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： React 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43558459/article/details/115335708
本文探讨了React组件在更新阶段的生命周期，重点在于当父组件render时如何影响子组件的更新。作者发现子组件即使props未变也会render，原因在于未在shouldComponentUpdate中进行props变化判断。同时，梳理了React旧版生命周期，包括constructor、componentWillReceiveProps、shouldComponentUpdate等关键方法的作用。理解这些知识点对于优化React应用性能至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题的起因是我写一个demo的时候，子组件中没有使用this.setState,父组件传给子组件的props也没有变，但是我的子组件还是render了。（除了挂载阶段的render）
让我百思不得其解，于是重新回去梳理了一下React的生命周期，究竟什么可以引发我子组件的render？

子组件的更新分为两种情况
第一种: 父组件render，导致重传props
如果我们在子组件中是直接使用this.props.xxx 那么可以在shouldcomponentUpdata判断props是否变化
如果我们是将父组件的属性转化为自己的state，则可以在componentWillReceiveProps时，用this.setState更新自己state的状态。
第二种：自身调用this.setState

我出现的问题的答案在于，我的父组件render，导致重传props，但是我没有在shouldcomponentUpdata中判断props是否变化，所以就默认为true，所以我的子组件再一次更新

再给大家梳理一下React旧版的生命周期

1.初始化阶段

1.1constructor
做一些初始化工作，比如定义this.state

2.挂载阶段Mount

2.1 componentWillMount
组件挂载前使用，不常用
2.2 render
根据props和state return一个React元素
render方法是一个纯函数
2.3 componentDidMount
组件挂载到Dom后调用且只会调用一次

3.更新阶段Update

这里敲重点！！
问题来了，子组件什么时候会更新？这就是我们最开始抛出来的问题
子组件的更新分为两种情况
第一种: 父组件render，导致重传props
如果我们在子组件中是直接使用this.props.xxx 那么可以在shouldcomponentUpdata判断props是否变化
如果我们是将父组件的属性转化为自己的state，则可以在componentWillReceiveProps时，用this.setState更新自己state的状态。
第二种：自身调用this.setState
3.1 componentWillReceiveProps(nextProps)
此方法只有在第一种情况，props引起的更新才会调用，父组件会传新的props，但不一定是有变化的，所以可以在这里判断是否有变化，我最开始的问题就是，我的父组件重新render了，所以重新传子组件props，但是我没有判断它有没有变化，没有拦截，子组件就会默认render
3.2 shouldComponentUpdata(nextProps,nextState)
返回的是bool值，如果是false则不render
3.3 componentWillUpdate
render前，很少用
3.4 render
3.5 componentDidUpdate
组件更新后被调用，可以操作组件更新的DOM

4.卸载阶段

4.1componentWillUnmount
卸载前调用，可以做一些清理工作
比如清除组件中使用的定时器等

React V16.4之后用
static getDevivedStateFromProps(props,state)
在组件创建和render之前使用，
也就是说取代了：
componentWillMount
componentWillReceiveProps
componentWillUpdate在这里插入图片描述

在这里插入图片描述

react学习教程3|组件通信，props,context,render,子传父，兄弟组件实现，children,函数组件，props校验，兄弟组件，父传子子传父实现
VAN
04-22 360
了解为什么需要组件通信组件是独立且封闭的单元，默认情况下组件组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信。
React-如何跳过子组件更新？
小陈的博客
06-11 1405
forceUpdate不会导致shouldComponentUpdate的触发4.判断步骤： 如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据。没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。 PureComponent不可滥用，他使用在class组件内，只有那些状态和属性不
React（五）：React在什么情况下会render
热门推荐
MR洁儿的博客
12-19 1万+
React中组件进行render的情况 1、初始化 React在应用初始化的时候，会渲染全部组件，组件的挂载过程见文章《React（三）：组件生命周期》中的介绍。 2、setState()在任何情况下都会导致组件的重新渲染，即使state未发生变化 当一个组件调用了setState()函数时，不论state是否发生了变化，该组件都将被重新渲染。 例如： import React fr...
[react] render在什么时候会被触发？
歌谣的博客
11-22 776
[react] render在什么时候会被触发？ 在 React 中，只要执行了 setState 方法，就一定会触发 render 函数执行； 组件的 props 改变了，不一定触发 render 函数的执行，除非 props 的值来自于父组件或者祖先组件的 state 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
说说React render方法的原理？在什么时候会被触发？
m0_65349389的博客
01-05 236
render函数里面可以编写JSX，转化成这种形式，用于生成虚拟DOM，最终转化成真实DOM在React中，类组件只要执行了setState方法，就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新render组件的props改变了，不一定触发render函数的执行，但是如果props的值来自于父组件或者祖先组件的state在这种情况下，父组件或者祖先组件的state发生了改变，就会导致子组件的重新渲染所以，一旦执行了setState就会执行render方法，
React render方法的原理，在什么时候会触发？
m0_65545080的博客
01-06 222
react,react.js
React组件之间的通信：子组件向父组件传递数据案例(回调函数)
qq_53008791的博客
07-15 2066
React组件之间的通信：子组件向父组件传递数据
react中父子组件传值详解，如何进行传值校验（父传子，子组件改变父组件的值）
weixin_45745641的博客
03-12 2369
文章目录父子组件的传值父子组件重名问题解决子组件改变父组件的值传值校验 父子组件的传值 在react中，父传子可以使用props的方法，子传父使用props的回调函数 父组件： 在父组件中定义state，将这个state对象传给子组件，所以可以直接在son组件上写{…this.state} import React, { Component } from 'react' import Son from './son' export class Parent extends Component {
React Native 子组件传值给父组件的方式
baihailing的博客
12-24 5394
实现React Native 中父子组件通信间的双向数据流，思路如下： 1.父组件向子组件传递props,其中props 中带有子组件的初始化数据以及回调方法； 2.子组件手动触发父函数传递进来的回调方法，同时将子组件的数据传递出去。 PS.使用 props 来传递事件，并通过回调的方式实现，这样的实现其实不是特别好，但在没有任何工具(redux)的情况下不失为一种简单的实现方式 父组件：...
React 父子组件的传参
weixin_46146313的博客
07-03 682
通过上节课的学习，已经把"小姐姐"组件做了一个基本的拆分，但是还不能实现随着输入，显示出输入的内容。这里涉及的是父组件向子组件传值。然后点击删除，就相当于子组件向父组件传值 父组件像子组件传值 这里只介绍最实用的，最快速的上手方法。就是使用组件属性的形式父组件给子组件传值。比如：我们在组件中加入content属性，然后给属性传递{item}，这样就完成了父组件向子组件传值。 <XiaojiejieItem content={item} /> 这时候可以通过this.props.xxx的形式进行
react中父组件异步修改参数，传递给子组件时遇到的问题
MR洁儿的博客
08-15 9120
最近在做react组件间传参的时候，遇到了一个问题，就是在父组件中通过调用异步函数修改了某一参数值，将其传递给子组件后，在子组件的componentDidMount()函数中获取到的仍然是未修改之前的值。 首先在父组件中定义参数初始值： constructor(){ super(); this.state = { testParam: [], //...
React组件中的render()
weixin_45210030的博客
05-09 80
可否将React组件中的render()看成一个大的div？只知道render返回一个React元素，是原生DOM的表示。
打破常识：React中Props更新并不意味着重渲染！- 从 useState 和 useRef 中看 react 更新机制
qq_46673075的博客
01-31 1594
在React的世界里，有一个广泛流传的误解：每当组件的props发生变化，React就会自动触发重渲染。这种说法是不正确的，实际上，React的更新逻辑复杂，它涉及到一系列精妙的优化机制，这些机制决定了何时以及为何进行重渲染，但我们日常使用触发重渲染的事件只有一个，那就是 通过 setState 来更改 state 的。最后再留个问题，每一次点击 add ，2个子组件的打印都会打印，但是 useRef 的子组件的 props 并没有更新， 理论上来说是不需要更新的。下面就使用代码来解释这个情况。
React 触发render的方法
忘川
07-10 1694
1、通过setState this.setState({}); 2、this.forceUpdate() this.forceUpdate(); 3、通过状态管理，如mobx，redux等
react触发render的三种方法
sinat_41747081的博客
12-25 6161
一、通过setState 二、this.forceUpdate() 三、通过状态管理，如mobx，redux等 项目中我改变了一个对象的值，并没有setState，导致没有重新render，加上 this.setState({}); 或者 this.forceUpdate(); 问题就解决了。 ...
react父组件更改props子组件无法刷新原因
lvfengxian2019的博客
09-06 7028
react父子传值问题
react 改变子组件props,触发render方法和生命周期函数（二）_触发render方法的三种方式
黄彪博客
09-17 6277
文章目录知识点案例定义父组件 ParentComp生命周期执行顺序调用setState定义子组件 ParentComp父子组件初始化执行的周期函数父组件改变子组件的props执行的周期函数销毁组件 知识点 在学习生命周期的，触发生命周期函数调用有三种方式 setState 改变状态的值 改变props的值 使用forceUpdate()方法 案例 定义父组件 ParentComp import...
react calss组件怎么子组件向父组件传参
最新发布
03-26
### React Class 组件中子组件向父组件传递参数的方法 在 React 中，可以通过回调函数的方式让子组件向父组件传递数据。具体来说，在父组件定义一个方法并通过 `props` 将该方法传递给子组件。当子组件调用这个方法时，可以将需要的数据作为参数传递回父组件。 以下是详细的实现方式： #### 实现步骤说明 1. **父组件定义回调函数** 在父组件内部定义一个处理逻辑的函数，并将其绑定到当前实例上以便于正确访问状态或属性。 2. **通过 props 将回调函数传递至子组件** 把上述定义好的函数作为一个 prop 属性赋值给子组件。 3. **子组件触发回调并将数据返回给父组件** 当特定事件发生时（比如按钮点击），子组件可以直接调用从父组件接收到的回调函数，并附带所需传输的信息。 #### 示例代码展示 ```javascript // 父组件 (ParentComponent.js) import React, { Component } from 'react'; class ParentComponent extends Component { constructor(props) { super(props); this.state = { messageFromChild: '' }; } // 定义接收消息的回调函数 handleMessageFromChild = (childMessage) => { this.setState({ messageFromChild: childMessage }); }; render() { return ( <div> {/* 显示来自子组件的消息 */} <h3>Message From Child: {this.state.messageFromChild}</h3> {/* 通过 props 将回调函数传递给子组件 */} <ChildComponent onSendMessage={this.handleMessageFromChild} /> </div> ); } } export default ParentComponent; // 子组件 (ChildComponent.js) import React, { Component } from 'react'; class ChildComponent extends Component { sendMessageToParent = () => { const message = "Hello, I'm the Child!"; // 调用父组件传入的回调函数并发送消息 if (typeof this.props.onSendMessage === 'function') { this.props.onSendMessage(message); } }; render() { return ( <button onClick={this.sendMessageToParent}> Send Message to Parent </button> ); } } ``` 在这个例子中，`handleMessageFromChild` 是由父组件定义的一个方法[^1]，它被设置为子组件的 `onSendMessage` 属性的一部分。一旦用户点击了子组件内的按钮，则会执行 `sendMessageToParent` 函数来通知其父级更新显示的内容[^2]。 #### 关键点解析 - **回调机制的应用**: 这种模式利用 JavaScript 的闭包特性使得即使是在不同的作用域下也能安全有效地共享行为和数据流控制权。 - **单向数据流动原则**: 数据总是自顶向下流动；即只有父节点能够改变自己的 state 或者修改子节点的行为/外观，而反过来则不行——除非借助额外手段像这里介绍过的那样建立显式的通信桥梁。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值