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

Question

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('我被初始化了')）？

Answer 1

当父组件使用 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 发生变化时才会重新渲染。