归来巨星 2023-03-09 17:11 采纳率: 80%
浏览 43
已结题

react 父组件使用useState,变更value值后 传递给子组件值,子组件如何做才会不重载?

react 父组件使用useState,变更value值后 传递给子组件值,子组件如何做才会不重载?代码如下

父组件

import { Switch } from 'tinkerbell-ui-react'
import React, { useState } from 'react'
const [value, setValue] = useState(false)
const change = (val) => {
  console.log(val)
  setValue(val)
}

const App: React.FC = () => (
  <>
    <Switch onChange={change} value={value} />
  </>
)

export default App

子组件

import React, { useState, useEffect, useMemo } from 'react'
import './index.scss'

function Switch(props: any) {
  function switchClick() {
    props.onChange(!props.value)
  }
  useEffect(() => {
    console.log('我被初始化了')
  }, [])
  return <div onClick={switchClick}>{props.value + 123}</div>
}

export default React.memo(Switch)

我如何在我每次点击子组件时,让子组件不被重新加载?不触发重新渲染操作 (console.log('我被初始化了'))?

img

  • 写回答

3条回答 默认 最新

  • 是悟能了 前端领域优质创作者 2023-03-09 17:25
    关注

    当父组件使用 useState 来管理状态并将其传递给子组件时,子组件可以使用 React.memo() 来避免不必要的重渲染。

    React.memo() 是一个高阶组件 (Higher Order Component) ,它可以接收一个组件作为参数,并返回一个新的组件,这个新的组件只有在其 props 发生改变时才会重新渲染。因此,当我们将子组件包裹在 React.memo() 中时,只有在其接收到的 props 发生变化时才会重新渲染。

    示例代码如下:

    import React, { useState } from 'react';
    
    function ParentComponent() {
      const [value, setValue] = useState('');
    
      const handleChange = (event) => {
        setValue(event.target.value);
      };
    
      return (
        <div>
          <input value={value} onChange={handleChange} />
          <ChildComponent value={value} />
        </div>
      );
    }
    
    const ChildComponent = React.memo(({ value }) => {
      return <div>{value}</div>;
    });
    
    export default ParentComponent;
    
    

    在上面的例子中,我们将 ChildComponent 包裹在 React.memo() 中,这样只有当 value 发生变化时才会重新渲染。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月18日
  • 已采纳回答 3月10日
  • 创建了问题 3月9日

悬赏问题

  • ¥15 GENESYS无法找到EESoft Flexnet Licence Serve
  • ¥15 流式socket文件传输答疑
  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出