React父子组件，父组件状态更新，子组件的渲染状况

于 2024-10-11 16:03:23 发布
阅读量246 收藏 7
点赞数 3
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52845451/article/details/142854316
版权

目录

React.memo不包裹

React.memo包裹

传递一个简单数据类型

传递一个复杂数据类型

传递一个函数

React.memo不包裹

如果子组件没有使用React.memo包裹，则父组件中数据更新时，子组件会重新进行渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son></Son>
    </>
  )
}

子组件：

export default function Son() {
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
}

会发现，在页面初始化加载的时候会触发一次。父组件里状态更新的时候也会触发一次

React.memo包裹

这里主要分析React.memo包裹的情况：

  • 正常的话，只有传值给子组件的值（也就是子组件props中的值）发生改变时才会触发子组件渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son></Son>
    </>
  )
}

子组件：

import React from 'react'

export default React.memo(function Son() {
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

然后我们依次分析各种传值的情况

传递一个简单数据类型

    1. 传值给子组件一个简单数据类型的值：只有值改变的时候子组件才会重新渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const count = 99

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son count={count}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  count: number
}

export default React.memo(function Son(props: IProps) {
  const { count } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

传递一个复杂数据类型

    2. 传值给子组件一个复杂数据类型的值：

  • 如果值使用useState包裹，则只有值改变的时候子组件才会重新渲染
  • 如果没有使用useState包裹，则不管值是否变化，只要父组件数据有变化，都会触发子组件重新渲染

不使用useState包裹

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const list = [1, 2, 3]

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: number[]
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

但是这显然不是我们想要的结果，我们使用React.memo包裹子组件，肯定是希望子组件接收的props值发生改变的时候才重新渲染子组件。如果要改善上面的情况，则就需要useMemo包裹下值（useMemo会缓存函数执行之后的值，只要参数2中的依赖项不发生改变，就不会触发参数1的回调函数）或者useState包裹下值

父组件：

import { useMemo, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const list = useMemo(() => [1, 2, 3], [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: number[]
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

使用useState包裹

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const [list, setList] = useState([1, 2, 3])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <button onClick={() => setList([...list, 99])}>
        listChange -- {list}
      </button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: Array<number>
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

传递一个函数

    3. 传值给子组件一个函数：不管函数有没有改变，只要父组件数据状态改变，都会触发子组件重新渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = () => {
    console.log('函数执行')
  }

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  fn: () => void
}

export default React.memo(function Son(props: IProps) {
  const { fn } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

同样的，我们使用React.memo包裹子组件，肯定也是希望子组件接收的props值发生改变的时候才重新渲染子组件。如果要改善上面的情况，则就需要useMemo包裹下函数（useMemo会缓存函数执行之后的值，只要参数2中的依赖项不发生改变，就不会触发参数1的回调函数）或者useCallback包裹下函数

父组件：

import { useMemo, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = useMemo(() => {
    return () => {
      console.log('函数执行')
    }
  }, [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  fn: () => void
}

export default React.memo(function Son(props: IProps) {
  const { fn } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

但是上面使用useMemo，还要return一个函数，写起来很臃肿，就可以使用useCallback这个hook来进行优化，效果是一样的。只需要改变下父组件代码即可

import { useCallback, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = useCallback(() => console.log('函数执行'), [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

结果跟上面一样：

小辉吖～
关注
react 父子组件的渲染机制 | 优化手段
好好学习天天向上
04-01 1786
本方法与组件形式引用的区别：组件重新渲染其实是执行render方法， 如果子组件采用组件形式引入(可以理解为这里引入的是子组件render方法的执行结果。但有些场景下我们并不希望所有的子组件都重新渲染，比如在一个列表中，我们只希望重新渲染单击受新选择影响的这项。有时无法轻易的把一个组件单独的独立提取出来，此时可以把带状态的组件提取出来，然后把耗时的组件作为。方法是一个高阶函数，参数是一个组件A，返回包装过的新组件B。比如选中的子组件高亮，父组件维护一个选中子组件的。发生变化，才会触发组件重新渲染。
React父子组件渲染顺序
EmotionComputer
04-12 1744
import React, { Component } from 'react'; class Children extends Component { constructor(props) { super(props); console.log('son constructor'); } componentDidMount() { console.log('son mounted') } render() {
React父子组件的通信方式
My_wife_QBL的博客
08-08 990
对于需要在多个层级组件间共享和管理状态的复杂应用，Redux 是一种流行的解决方案。Redux 提供了一个集中式存储（store），使得任何组件都可以访问和更新全局状态。在 React 中，父子组件之间的通信方式有多种选择，包括属性传递、回调函数、上下文 API，以及使用 Redux 等状态管理库。每种方法都有其优缺点，适用于不同的场景。属性传递适合简单的父子数据传递。回调函数提供了双向通信的能力。上下文 API减少了 props drilling，使得多个组件可以共享数据。状态管理库。
react父组件渲染不影响子组件
qq_45149366的博客
08-24 3130
react父组件渲染不影响子组件
React父子组件通信 - 子传父实现
听海边涛声
07-26 150
React父子组件通信 - 子传父实现
React前端渲染优化--父组件导致子组件重复渲染的问题
m0_51788889的博客
02-23 1245
当父组件本身状态更新时，这个状态并没有作为props传给子组件，也会触发子组件更新机制。这样就造成了组件重复渲染的问题
React父组件向子组件传值时，子组件不立马渲染问题
weixin_53457368的博客
07-10 707
React父组件向子组件传值时，子组件不立马渲染问题。
【React性能优化】父组件渲染如何避免子组件不必要的渲染
Blablabla_的博客
07-05 720
【React性能优化】父组件渲染如何避免子组件不必要的渲染
React 父子组件通信的几种方法
热门推荐
火星基地
11-08 1万+
在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。 其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。 1. 父组件向子组件通信 1. props 如下代码，name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。 参数name由父组件传递给了子组件。 import { useState } from 'react'; const Son = ({ name })
react 父子组件之间通讯props
10-18
总结来说，在React中，父子组件间的通信主要通过props来实现，父组件向子组件传递数据和回调函数，子组件通过调用这些回调函数向父组件传递数据变化。这种通信机制保证了组件间数据流的清晰和组件状态的可控。需要...
React通过父组件传递类名给子组件的实现方法
10-19
类名可以用来控制子组件的样式，例如，你可以根据不同的父组件状态来决定子组件的显示样式。在给定的代码片段中，父组件将类名通过props传递给子组件PageTitle。子组件通过props接收到了类名，并将其应用到了相应的...
react 中父组件与子组件双向绑定问题
10-16
父组件接收到这些数据后，更新其状态，因为状态的更新导致重新渲染，从而影响到子组件，实现了双向绑定的效果。 需要注意的是，在React中实现的双向绑定，并不是双向数据流，而是通过单向数据流和回调函数的机制来...
React 子组件向父组件传值的方法
08-29
在上面的代码中，我们定义了一个父组件，包含一个状态 email，一个函数 handleEmail，该函数将在子组件中被调用，用于更新父组件的状态。在 render 函数中，我们将子组件渲染出来，并将 handleEmail 函数传递给子...
详解React之父子组件传递和其它一些要点
08-27
React 之父子组件传递和其他一些要点 React 是 R 系技术栈中最基础同时也是最核心的一环，2 年不到获取了 62.5k star（截止到目前），足可见其给力程度。在 React 中，组件生命周期是一个非常重要的概念，它规定了...
React中的refs是什么？
Front end development engineer
10-10 234
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
React18新特性
警警的博客
10-06 1066
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
React中useEffect钩子
最新发布
警警的博客
10-10 629
useEffect是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动更改 React 组件中的 DOM 等。useEffect使得在函数组件中处理这些操作变得简单而强大。
React中useState、useReducer与useRef
警警的博客
10-09 1474
// 注意：这里传入了一个不同的初始值，但实际上在多个组件中共享的是同一个 ref 对象，所以初始值只会在第一个组件挂载时生效return (
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值