类组件绑定与函数组件 useCallback-解网

问：

为了进行比较，我编写了与类与函数组件相同的逻辑，并注意到一些行为差异。

带有绑定的类组件：

this.logName = this.logName.bind(this);

然后函数组件：useCallback

const logName = useCallback(() => {
   console.log(`Name is - ${state.name}`);
}, [state.name]);

在这些组件中，我调用子组件（为了性能而包装）：react.memo

import React, { useEffect, useState } from "react";

const ChildComp = (props) => {
  const [state, setState] = useState(0);
  useEffect(() => {
    console.log("child render");
    setState((state) => state + 1);
  }, [props]);
  return (
    <div className="child">
      <h4>Child Comp ({state})</h4>
      <button onClick={props.log}>Log Name </button>
    </div>
  );
};

//export default ChildComp;
export default React.memo(ChildComp, (p, n) => p.log === n.log);

沙盒在这里

如果我更新年龄，由于它不会重新渲染子项，因此在两者中都是预期的并且工作正常，但是如果我在功能中更新，子项重新渲染（由于依赖性），但在课堂上没有。由于在类组件中，我总是得到正确的值，但不能删除函数中的依赖项（），否则我会得到旧值。react.memostate.nameuseCallbackbind[state.name]

请帮助我理解这一点。我是否需要进一步优化函数组件以获得与类相同的行为（甚至没有子渲染甚至更新），我该怎么做？state.name

reactjs 性能 react-functional-component react-class-based-component

类和函数是不同的构造，因此自然而然地，每个类和函数都有自己的注意事项。React 有一个常见的误解，即重新渲染总是不好的，但只有在输出发生变化（或在渲染时重新运行副作用）时才会出现这种情况。React 将渲染一个子组件，看到它不会触发任何更改并会纾困，不会渲染整个树，也不会更改 DOM。但是，在您的示例中，您可以通过对整个对象的依赖关系来设置每个渲染的状态来阻止这种优化。props

0赞 Emile Bergeron 10/25/2023

然而，回调是 React 函数组件问题的常见来源，例如在回调中捕获过时状态以及正确解决它的不同方法。

0赞 Deepak Sharma 10/25/2023

@EmileBergeron感谢您的解释，我的理解也是一样的。仅供参考，尝试过没有，也使用.例如 - 然后在功能组件中重新渲染子项setStateuseEffectuseRefconst count = useRef(0); count.current = count.current + 1;

答： 暂无答案

上一个：App Intro Slider 在页面上具有可检查的输入 - 从父级调用操作，向父级发送事件

下一个：无法更新 submitData 状态值，由于 js 的异步行为，无法更新状态值

类组件绑定与函数组件 useCallback

Class component bind vs. function component useCallback

评论