reactjs - React hooks 可以在 JSX 中使用吗？

Question

我最近遇到了以下代码:

    import React, { useContext } from "react";
    import ReactDOM from "react-dom";
    import UserContext from 'UserContext';
    const useUserName = () => {
      const context = useContext(UserContext);
      return context.userName;
    }

    function App() {
      return (
        <div className="App">
          {useUserName()}
        </div>
      );
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

useUserName 以字符串形式返回用户名。在“render”函数内部的 JSX 中使用 React hook useUserName ，这看起来本能地奇怪和错误。这是有效的用法吗？我找不到任何禁止此类使用的引用。

Answer 1

It seems instinctively strange and wrong that react hook useUserName is used inside JSX that is inside the "render" function.

整个组件只不过是一个 render() 函数。

Is this valid usage?

这和有什么区别

function App() {
  const userName = useUserName();
  return (
    <div className="App">
      {userName}
    </div>
  );
}