渲染带钩子和不带钩子的功能组件有什么区别吗?

Question

刚刚尝试了一些反应钩子并得到了一些问题。

考虑这个带有反应钩子的功能组件：

const Counter = (props) => {
  console.log("Counter component");
  const [count, setCount] = useState(0);
  const handleIncrease = () => {
    setCount(count + 1);
  }
  const handleDecrease = () => {
    setCount(count - 1);
  }
  return (
    <div>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
      <p>{count}</p>
    </div>
  )
}

每次我单击"+"或"-"时，它都会记录下来。

这是否意味着此组件(或函数(中的每个处理程序都被重新声明并重新分配给变量？如果是这样，它不会导致一些性能问题吗？

对我来说，带有钩子的功能组件似乎是经典组件的巨大渲染方法，如下所示：

class Counter extends React.Component {
  state = {
    count: 0,
  }
  render() {
    const handleIncrease = () => {
      this.setState({ count: this.state.count + 1 });
    }
    const handleDecrease = () => {
      this.setState({ count: this.state.count - 1 });
    }
    return (
      <div>
        <button onClick={handleIncrease}>+</button>
        <button onClick={handleDecrease}>-</button>
        <p>{count}</p>
      </div>
    )
  }
}

我认为没有人会这样做。

我是否对 React 的渲染机制有误解，或者这不是将功能组件与 react-hooks 一起使用时的最佳实践？

Answer 1

尽管在功能组件中，函数在每次渲染时都会重新创建，但与好处相比，它的性能成本要低得多。

您可以参考这篇文章以获取更多详细信息：在每个渲染上创建处理程序的性能损失

但是，您仍然可以进行优化，以便不会使用 useCallback 或 useReducer(depending on whether your updates are complex or not) 在每次渲染上重新创建函数

const Counter = (props) => {
  console.log("Counter component");
  const [count, setCount] = useState(0);
  const handleIncrease = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [])
  const handleDecrease = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [])
  return (
    <div>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
      <p>{count}</p>
    </div>
  )
}

在上面的例子中，函数仅在初始渲染时重新创建，使用状态更新回调，我们可以更新状态并避免闭包问题