在useEffect中传入两个及以上不同回调函数是否符合规范？

运行可行性 #

你写的这种写法是完全可以正常跑通的。useEffect本身就要求第一个参数是函数，你的三元表达式最终返回的就是函数类型，符合参数要求，实际运行时会根据渲染时count的奇偶值选择对应的回调，在渲染完成后执行。

写法的问题和优化建议 #

• 你当前的示例没有给useEffect加第二个依赖数组参数，这会导致组件每次渲染完都会执行这个useEffect的回调，建议补充对应的依赖，比如只有count变化时才需要改标题，就加[count]作为第二个参数即可。
• 要注意useEffect只能在函数组件或者自定义Hook中使用，不能在类组件里调用，所以你示例里写的this.state.count是有问题的，函数组件里直接用useState返回的count变量就行，不需要加this.state前缀。

实际使用价值 #

绝大多数场景都不推荐这么写，把判断逻辑放到同一个useEffect回调里会更清晰，也更好维护，参考写法：

useEffect(() => {
  const suffix = count % 2 === 1 ? ' (ODD)' : '(EVEN)'
  document.title = `You clicked ${count} times${suffix}`
}, [count])

如果两个分支的逻辑差别特别大，分开维护更方便，也建议在同一个回调内调用不同的函数，不要动态给useEffect传参：

const handleOdd = () => {
  document.title = `You clicked ${count} times (ODD)`
  // 其他奇数对应的逻辑
}
const handleEven = () => {
  document.title = `You clicked ${count} times(EVEN)`
  // 其他偶数对应的逻辑
}
useEffect(() => {
  count % 2 === 1 ? handleOdd() : handleEven()
}, [count])

动态传不同回调的写法，后续要加清理函数、调试依赖问题的时候都会更麻烦，没有特殊需求没必要这么实现。

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