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

Question

刚刚尝试了一些 react-hooks 并得到了一些问题。

考虑这个带有 react-hooks 的功能组件：

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

虽然在函数式组件中，函数会在每次渲染时重新创建，但与收益相比，它的性能成本要低得多。

您可以参考这篇文章了解更多详情：Performance penalty of creating handlers on every render

但是您仍然可以进行优化，以便不会在每次使用 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>
  )
}

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