Question

是否可以在onClick中使用钩子？

看这个source：

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

export default function CounterUseState (props) {
  const [count, setCount] = useState(props.initialCount || 0)
  const add = () => { setCount(count + 1) }
  const minus = () => { setCount(count - 1) }
  const reset = () => { setCount(0) }

  return (
      <div className="counter">
        <span className="counter__count">{ count }</span>
        <button onClick={add}>+</button>
        <button onClick={minus}>-</button>
        <button onClick={reset}>Clear</button>
      </div>
    )
}

我会这样写

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>
    )
}

但是我不确定这是否可行。在“常规”类组件中，我可以在state上设置click()内联。但是，useState提供了组件生命周期内的状态。内联函数内部是否有意义？

Answer 1

不能有条件地或根据用户操作来启动挂钩。但是，您要做的是对用户操作调用状态更新程序方法，这是正确的，这正是为什么可以使用更新程序方法的原因。

第一种方法和第二种方法之间没有区别，除了您要在封闭范围中取出函数并为其命名而不是直接内联定义

Answer 2

是的，可以像示例一样内联调用setCount方法。

您在这里所做的全部是传递一个单击按钮时将调用的函数-由您决定是内联声明函数[您的第二个示例]，还是引用返回常量的变量[您的第一个例子]。

当组件具有像您一样的非常简单的逻辑时，您可能会发现内联处理更易读。 React-use是一个流行的钩子库。他们是这样in their docs来做的。

但是，如果您需要在调用setCount之前在函数内部执行大量其他操作，则引用该函数可能更易读。例如：

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

...

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

在onClick中使用钩子

2 个答案: