Performance “反应钩”的问题；“使用回调”；和纯组分

在React Hooks之前，我有这样一个代码：

interface State {
  f1: number;
  f2: number;
}

class OldClassParent extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      f1: 0,
      f2: 0
    };
  }

  public render() {
    const { f1, f2 } = this.state;
    return (
      <>
        {/* Each pure component re-render only if its value has changed (OK) */}
        <MyPureCmp value={f1} name="f1" onChange={this.onChange} />
        <MyPureCmp value={f2} name="f2" onChange={this.onChange} />
      </>
    );
  }

  private onChange = (name: string, newValue: number) => {
    // @ts-ignore
    this.setState({
      [name]: newValue
    });
  }
}

接口状态{
f1：数量；
f2：数量；
}
类OldClassParent扩展React.Component{
构造函数（props:{}）{
超级（道具）；
此.state={
f1:0,，
f2:0
};
}
公共渲染（）{
常量{f1，f2}=此.state；
返回(
{/*每个纯组件仅在其值已更改时重新渲染（确定）*/}
);
}
private onChange=（名称：string，newValue:number）=>{
//@ts忽略
这是我的国家({
[名称]：newValue
});
}
}

现在，我试着用React钩子做同样的行为。我作了以下发言：

const NewHookParent: React.FC = () => {
  const [state, setState] = useState({
    f1: 0,
    f2: 0
  });

  // useCallback does not help me here
  const onChange = useCallback((name: string, newValue: number) => {
    setState({...state, [name]: newValue});
  }, [state, setState]);

  const { f1, f2 } = state;
  return (
    <>
      {/* Each pure component re-render when any value change 
        as the onChange handler is never the same (NOT OK) */}
      <MyPureCmp value={f1} name="f1" onChange={onChange} />
      <MyPureCmp value={f2} name="f2" onChange={onChange} />
    </>
  );
}

const NewHookParent:React.FC=（）=>{
常量[状态，设置状态]=使用状态({
f1:0,，
f2:0
});
//这对我没有帮助
const onChange=useCallback（（名称：string，newValue:number）=>{
setState（{…state，[名称]：newValue}）；
}，[状态，设置状态]；
常数{f1，f2}=状态；
返回(
{/*当任何值更改时，每个纯组件都会重新渲染
因为onChange处理程序从来都不一样（不正常）*/}
);
}

问题是我失去了以前的重新渲染优化。 在这个例子中，为了简单起见，我只使用了两个字段，但实际上我可以有任意数量的字段（它可以是动态的，在编译时不知道）。

---

我该怎么办？

由

useState

生成的

setState

函数接受更新程序函数。使用当前状态调用更新程序。使用此选项可以将状态传递给

useCallback

，并且由于

setState

本身不会更改，

useCallback

将始终返回相同的函数

const onChange = useCallback((name: string, newValue: number) => {
  setState(state => ({...state, [name]: newValue}));
}, [setState]);