相关疑难解决方法(0)

我正在尝试使用新的 Hooks 从类组件转向功能组件。然而，感觉与useCallback类组件中的类函数不同，我会得到不必要的子元素渲染。

下面我有两个相对简单的片段。第一个是我编写为类的示例，第二个是我将示例重写为功能组件。目标是让功能组件获得与类组件相同的行为。

类组件测试用例

class Block extends React.PureComponent {
  render() {
    console.log("Rendering block: ", this.props.color);

    return (
        <div onClick={this.props.onBlockClick}
          style = {
            {
              width: '200px',
              height: '100px',
              marginTop: '12px',
              backgroundColor: this.props.color,
              textAlign: 'center'
            }
          }>
          {this.props.text}
         </div>
    );
  }
};

class Example extends React.Component {
  state = {
    count: 0
  }
  
  
  onClick = () => {
    console.log("I've been clicked when count was: ", this.state.count);
  }
  
  updateCount = () => {
    this.setState({ count: this.state.count + 1});
  };
  
  render() …

我正在尝试制作一个简单的示例，该示例遵循文档https://reactjs.org/docs/hooks-reference.html#usecallback上文档中的React Hooks示例

如果没有useCallback代码，请按以下示例进行查找：

import React, { useCallback } from "react";

function Test(props) {
  function doSomething(a, b) {
    console.log("doSomething called");
    return a + b;
  }

  return (
    <div>
      {Array.from({ length: 3 }).map(() => (
        <div>{doSomething('aaa','bbb')}</div>
      ))}
    </div>
  );
}

export default Test;

但是，当我添加我认为正确的代码useCallback如下时，出现错误（未定义a）

import React, { useCallback } from "react";

function Test(props) {
  function doSomething(a, b) {
    console.log("doSomething called");
    return a + b;
  }

  const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, …