Javascript 在onClick中使用hook

可以在onClick中使用钩子吗

看看这个：

import React，{useState，useffect}来自“React”
导出默认函数CounterUseState（道具）{
const[count，setCount]=useState（props.initialCount | | 0）
常量add=（）=>{setCount（count+1）}
常量减号=（）=>{setCount（count-1）}
常量重置=（）=>{setCount（0）}
返回(
{count}
+
-
清楚的
)
}

我会这样写

import React, { useState, useEffect } from 'react' 

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() =>  setCount(count - 1)}>-</button>
        <button onClick={() => setCount(0)}>Clear</button>
      </div>
    )
}

import React，{useState，useffect}来自“React”
导出默认函数CounterUseState（道具）{
const[count，setCount]=useState（props.initialCount | | 0）
返回(
{count}
设置计数（计数+1）}>+
设置计数（计数-1）}>-
setCount（0）}>清除
)
}

---

但我不确定这是否可能。在“普通”类组件中，我可以在

click（）

上设置

状态

内联。但是，useState提供组件生命周期的状态。活在内联函数中有意义吗？

钩子不能有条件地或在用户操作中启动。然而，您试图做的是对正确的用户操作调用state updater方法，这正是updater方法可用的原因

---

此外，第一种方法和第二种方法之间没有区别，除了在封闭范围内取出函数并给它一个名称，而不是内联定义它之外。

是的，可以像您的示例那样内联调用

setCount

方法

您在这里所做的只是传递一个函数，单击按钮时将调用该函数-这取决于您是要内联声明函数[您的第二个示例]，还是引用返回常量的变量[您的第一个示例]

当组件具有与您类似的非常简单的逻辑时，您可能会发现内联操作更具可读性。React use是一个流行的钩子库。他们是这样做的

但是，如果在调用setCount之前需要在函数内部执行一系列其他操作，那么引用该函数可能更具可读性。例如：

const myComplicatedAdderFunction = () => { 
  // do other stuff
  setCount(count + 1) 
}

...

<button onClick={myComplicatedAdderFunction}>+</button>

const myComplicatedAdderFunction=（）=>{
//做其他事情
设置计数（计数+1）
}
...
+

是的，这是可能的，也是功能组件的推荐方式。两个示例的作用完全相同。使用你喜欢的方式（我不同意“推荐”方式的说法——这纯粹是代码风格，据我所知，文档没有特别推荐）。

const myComplicatedAdderFunction = () => { 
  // do other stuff
  setCount(count + 1) 
}

...

<button onClick={myComplicatedAdderFunction}>+</button>