使用react hooks时，事件或其他处理函数应该写在哪里？

Question

问题如下:

在类组件中，事件或其他处理函数通过下面这样的方式访问和声明。

class xxx {
    state = { ind: 0 }

    componentDidMount() {
        this.getList();
    }

    setInd(ind) { 
        if(this.state.ind === ind) return;    // 这里通过this访问ind
    
        this.setState({ ind });
    }
    
    render() {
        return (
            <div>
                <div onClick={this.setInd.bind(this, 0)}>tab1</div>
                <div onClick={this.setInd.bind(this, 1)}>tab2</div>
            </div>
        )
    }
}

但是在使用函数加hooks的形式时，

const xxx= (props) => {
  let [ind, setInd] = useState(0);

  function setInd(_ind) {
      if(ind === _ind) return;
      this.setState({ ind: _ind });
  }

  return (
      <div>
          <div onClick={setInd.bind(null, 1)}>个人</div>
          <div onClick={setInd.bind(null, 2)}>团队</div>
      </div>
    </div>
  );
};

对这样的写法我有两个疑问：

1. 在每次xxx的prop或hookState改变时，都会重新执行xxx函数，并重新创建内部的setInd函数，如果处理函数很多的话，会不会有性能问题。
2. 当处理函数太多的时候xxx函数内简直就是 一坨。我也尝试过把处理函数写成外部函数，但是又会出现如下的问题。

const xxx= (props) => {
  let [ind, setInd] = useState(0);

  let context = {    // 因为外部函数访问不到钩子里的state，所以必须手动把状态传过去, 但是这种方式能让代码看起来稍微好看一点。
    ind,
    setInd,
  }

  return (
      <div>
          <div onClick={setInd.bind(context, 1)}>个人</div>
          <div onClick={setInd.bind(context, 2)}>团队</div>
      </div>
  );
};

function setInd(ind, e) {
  if(this.ind === ind) return;

  this.setInd(ind)
}

Answer 1

第一个问题可以用｀useCallback()｀
第二个问题可以自己根据业务自定义hook函数

Answer 2

改用 hooks 的写法应该是这样的吧。

const xxx= (props) => {
  let [ind, setInd] = useState(0);

  function handleClick(_ind) {
      if(ind === _ind) return;
      setInd({ ind: _ind });
  }

  return (
      <div>
          <div onClick={()=>{handleClick(1)}>个人</div>
          <div onClick={()=>{handleClick(2)}>团队</div>
      </div>
    </div>
  );
};

Answer 3

hooks不会被反复创建，
let [ind, setInd] = useState(0);
setInd(1)就可以更新ind的值，为什么还自己写，你可以在其他函数里调用setInd就行了