React组件中如何移除内联函数并应用Currying（柯里化）？

要解决这个问题，核心是通过柯里化让事件处理函数提前接收id参数，返回一个可直接绑定给onClick的回调函数，从而避免在render中使用内联箭头函数。

方案1：改造Redux Action Creator为柯里化形式 #

直接修改你的Redux Action Creator，让它们先接收任务id，再返回一个可作为事件回调的函数（如果用了Redux Thunk这类中间件，这种写法完全兼容）：

// 柯里化后的Action Creator示例
export const completeTask = (id) => () => {
  return {
    type: 'COMPLETE_TASK',
    payload: id
  };
};

export const removeTask = (id) => () => {
  return {
    type: 'REMOVE_TASK',
    payload: id
  };
};

之后组件的render方法可以直接传递柯里化后的函数引用，无需内联包裹：

render() {
    const {
      isCompleted,
      completeTask,
      id,
      removeTask,
      text,
    } = this.props

    return (
      <Task isCompleted={isCompleted}>
        {text}
        <ButtonContainer>
          <StyledIconUpate
            isCompleted={isCompleted}
            onClick={completeTask(id)}
          />
          <StyledIconRemove
            onClick={removeTask(id)}
          />
        </ButtonContainer>
      </Task>
    )
  }
}

方案2：在组件内部封装柯里化处理函数 #

如果无法修改Redux Action Creator，可以在组件内部定义柯里化的处理方法，把id参数提前传入：

class YourComponent extends React.Component {
  // 柯里化的完成任务处理函数
  handleComplete = (id) => () => {
    this.props.completeTask(id);
  };

  // 柯里化的删除任务处理函数
  handleRemove = (id) => () => {
    this.props.removeTask(id);
  };

  render() {
    const { isCompleted, id, text } = this.props;

    return (
      <Task isCompleted={isCompleted}>
        {text}
        <ButtonContainer>
          <StyledIconUpate
            isCompleted={isCompleted}
            onClick={this.handleComplete(id)}
          />
          <StyledIconRemove
            onClick={this.handleRemove(id)}
          />
        </ButtonContainer>
      </Task>
    );
  }
}

为什么这样做？ #

原来的内联箭头函数() => completeTask(id)会在每次render时创建新的函数实例，可能导致子组件（比如StyledIconUpate）触发不必要的重渲染（如果子组件是PureComponent或使用了memo优化）。通过柯里化，我们把参数提前注入，传递给onClick的是一个直接的函数引用，避免了内联函数带来的额外开销。

内容的提问来源于stack exchange，提问作者qwfrjk