React使用中常犯的错误

一:函数

在 React 中我们通常使用 tsx 来编写代码,在编码时我经常会遇到一个,选择用什么方式来调用我们的函数如:

const clickMe=()=>{
    console.log('button')
}
<button onClick={clickMe}>clickMe</button> // 1
<button onClick={clickMe()}>clickMe</button> // 2
<button onClick={()=>clickMe()}>clickMe</button> // 3

当我们使用第一种方法来调用函数时,这个函数就像传递的任何其他函数一样调用,直接调用即可

在第二种方式中,这个函数不只是传递了打印操作功能,此时需要有一个返回的函数

在第三种方式中,就是一个基本的函数调用,如果不需要返回值的话,无需关心返回的内容

二:短路

在 React 中我们经常需要通过一个或多个属性来判断一些元素是否需要被渲染如下,当数组不为空时渲染按钮

export default (props: Props) => {
  const array = [1, 2, 3];
  return (
    <div>
      {array.length &&
        array.map((item) => {
          return <Button>按钮-{item}</Button>;
        })}
    </div>
  );
};

值得注意的是当array.length不为 0 时,代码会是偶们想要的效果,当array为空时,array.length为 0,此时 React 会将 0 渲染到页面上,而null,undefined,false则不会出现这个问题,所以当需要判断数组长度时,需要准确判断array.length===0orarray.length!==0,由于[]和{}隐式转换为true,所以当判断对象时也需要准确判断是否为null