Question

是否还可以将箭头函数与新的React Hook语法一起使用？有什么区别和/或可能引起问题？

文档语法：

function Example() {

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

箭头功能：

 const Example = () => {

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Answer 1

使用function或const声明功能组件之间的差异与functional expressions和functional declaration之间的差异相同

例如，在执行任何代码之前先加载Function declarations，而仅在解释器到达该行代码时才加载Function expressions，即可以渲染使用function语法创建的功能组件是在代码中定义的，而如果使用expression进行了定义，则需要在使用前声明它

因此简而言之，function declarations被吊起，而function expressions没有被吊起

就同时使用以上两种语法来创建组件而言，只要使用提升功能，就可以使用其中一种

Answer 2

简单的答案是：是的。

箭头函数和函数声明/表达式不等效。但是，如果您要替换的函数没有使用this，arguments并且没有用new调用，那么您可以随意使用任何喜欢的样式。

Answer 3

TL; DR ：是

但是我绝对愿意在function expression上使用arrow function，因为同时使用这两个元素来编写组件会防止起吊问题。

const MyComponent = ({ someProp }) => (
  <div>
    {someProp}
  </div>
);

使用状态：

const MyComponent = ({ someProp }) => {
  const [showText, setShowText] = useState(false);

  return (
    <div onClick={setShowText}>
      {showText && <span>some text</span>}
      {someProp}
    </div>
  );
};

Answer 4

是一样的。每个函数与箭头函数的区别是相同的（没有自己的作用域），但对于react hooks来说是相同的

我可以在React Hooks中使用箭头功能代替常规功能吗？

4 个答案: