11 个需要避免的 React 错误用法

Souleigh ✨
• 阅读 479

11 个需要避免的 React 错误用法

随着 React 越来越受欢迎,React 开发者也越来越多,在开发过程中也遇到各种各样的问题。

本文我将结合自己实际工作经验,总结 11 个 React 开发中常见的一些错误,帮助您避免一些错误的发生。

如果您刚开始使用 React,那建议这篇文章你要好好看一下,如果您已经使用过 React 开发项目,也建议您能查缺补漏一下。

阅读完本文,您将学习如何避免下面这 11 个 React 错误用法:

  1. 渲染列表时,不使用 key

  2. 直接通过赋值方式修改 state 值

  3. 将 state 值直接绑定到 input 标签的 value 属性

  4. 执行 setState 后直接使用 state

  5. 使用 useState + useEffect 时出现无限循环

  6. 忘记在 useEffect 中清理副作用

  7. 错误的使用布尔运算符

  8. 没有定义组件参数类型

  9. 把字符串当做数值传递到组件

  10. 没有以大写字母开头的组件名称

  11. 错误的为元素绑定事件

1. 渲染列表时,不使用 key

问题描述

在刚学 React 时,我们会根据文档介绍的方式来渲染一个列表,比如:

const numbers = [1, 2, 3, 4, 5];   
const listItems = numbers.map((number) => <li>{number}</li>);   

当渲染以后,控制台会提示警告 ⚠️ a key should be provided for list items

解决方法

你只需要按照提示,为每一项添加 key属性即可:

const numbers = [1, 2, 3, 4, 5];   
const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);   

key 帮助 React 识别哪些元素改变了,比如被添加或删除。所以我们需要给数组中的每一个元素设置一个唯一的 key值。

2. 直接通过赋值方式修改 state 值

问题描述

在 React 中,state 是不能直接赋值修改,否则会导致难以修复的问题,因此下面的写法:

updateState = () => {     
   this.state.name = "Helloworld";   
};   

此时编辑器会提示警告 ⚠️:

Do not mutate state directly. Use setState().   

解决方法

类组件可以通过 setState()方法修改,函数组件使用 useState()即可:

// ClassComponent:use setState()   
this.setState({ name: "Helloworld" });      
// FunctionConponent:use useState()   
const [name, setName] = useState("");   
setName("Helloworld");   

3. 将 state 值直接绑定到 input 标签的 value 属性

问题描述

当我们直接将 state的值作为参数绑定到 input标签的 value属性上,我们会发现,无论我们在输入框输入什么内容,输入框内容都不会发生变化。

export default function App() {     
  const [count, setCount] = useState(0);     
  return <input type="text" value={count} />;   
}   

这是因为我们是使用带状态的 state 变量作为默认值赋值给 <input>value,而函数式组件中要修改 state的只能通过 useState 返回的 set方法修改。所以解决的办法也很简单,只要修改的时候使用对于 set方法即可。

解决方法

只需要为 <input>绑定一个 onChange事件,通过调用 setCount实现修改:

export default function App() {     
  const [count, setCount] = useState(0);     
  const change = (val) => setCount(val.value);     
  return <input type="text" value={count} onChange={change} />;   
}   

4. 执行 setState 后直接使用 state

问题描述

当我们通过 setState()修改完数据,马上获取该数据,会出现数据还是旧值的情况:

// init state data   
this.state = { name: "Helloworld" };      
// update state data   
this.setState({ name: "Helloworld!" });   
console.log(this.state.name); // output: Helloworld   

我们可能会认为这时候输入的 this.state.name应该是 Hello Helloworld!,但结果却是 Helloworld。这是因为 setState()是异步的,当执行 setState()时,会把真正的更新操作放到异步队列中去执行,而接下来要执行的代码(即console.log这一行)是同步执行的,所以打印出来的 state不是最新值。

解决方法

只需要将要执行的后续操作封装成函数,作为 setState()第二个参数,该回调函数会在更新完成后执行。

this.setState({ name: "Helloworld!" }, () => {     
  console.log(this.state.name); // output: Helloworld!   
});   

现在就可以输出正确的内容了。

5. 使用 useState + useEffect 时出现无限循环

问题描述

当我们在 useEffect()中直接调用 useState()返回的 set*()方法,并且没有设置 useEffect()第二个参数时,会发现出现死循环了:

export default function App() {     
const [count, setCount] = useState(0);     
useEffect(() => {       
  setCount(count + 1);     
});     
  return <div className="App">{count}</div>;   
}   

这时可以看到页面上数据一直增加,useEffect()被无限调用了,进入死循环状态。

解决方法

这是典型的 useEffect()使用错误的问题,useEffect()可以看做是类组件中componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个生命周期函数的组合。useEffect(effect, deps)接收 2 个参数:

  • effect副作用函数;

  • deps依赖项数组。

deps数组发生变化,副作用函数 effect就会执行。修改方法只需要在 useEffect()第二个参数传入 []即可:

export default function App() {     
const [count, setCount] = useState(0);     
useEffect(() => {       
  setCount(count + 1);     
}, []);     
  return <div className="App">{count}</div>;   
}   

具体再解释一下 useEffect 使用的 4 种情况:

  • 「第二个参数不传」:任何状态更新,都会触发 useEffect的副作用函数。
useEffect(() => {     
  setCount(count + 1);   
});   
  • 「第二个参数为空数组」:仅在挂载和卸载的时触发 useEffect的副作用函数。
useEffect(() => {     
  setCount(count + 1);   
}, []);   
  • 「第二个参数为单值数组:」 仅在该值变化,才会触发 useEffect的副作用函数。
useEffect(() => {     
  setCount(count + 1);   
}, [name]);   
  • 「第二个参数为多值数组:」 仅在传入的值发生变化,才会触发 useEffect的副作用函数。
useEffect(() => {     
  setCount(count + 1);   
}, [name, age]);   

6. 忘记在 useEffect 中清理副作用

问题描述

我们在类组件中,经常使用 componentDidMount() 生命周期方法去清理一些副作用,比如定时器、事件监听等。

解决方法

可以为 useEffect()的副作用函数设置返回函数,该函数类似 componentDidMount() 生命周期方法的作用:

useEffect(() => {     
// Other Code     
return () => clearInterval(id);   
}, [name, age]);   

7. 错误的使用布尔运算符

问题描述

在 JSX/TSX 语法中,我们经常通过布尔值来控制渲染的元素,很多情况我们会使用 &&运算符来处理这种逻辑:

const count = 0;   
const Comp = () => count && <h1>Helloworld</h1>;   

我们会很自然的以为这时候页面显示的是空内容,但实际却显示了 0的内容在上面。

解决方法

原因是因为 falsy 表达式会使 && 后面的元素被跳过,但会返回 falsy 表达式的值。所以我们尽量要把判断条件写完整,不依赖 JavaScript 的布尔值真假来比较:

const count = 0;   
const Comp = () => count > 0 && <h1>Helloworld</h1>;   

页面就能显示空内容了。

8. 没有定义组件参数类型

问题描述

对于团队开发常见,每个人开发的组件如果没有定义好参数类型,就很容易出现配合的同事不知道如何使用组件,这就很麻烦了,比如:

const UserInfo = (props) => {     
return (       
  <div>         {props.name} : {props.age}       </div>     
);   
};   

解决方法

解决方法有

  • 使用 TypeScript ,定义组件 props类型;
// ClassComponent   
interface AppProps {     value: string;   }   
interface AppState {     count: number;   }      
class App extends React.Component<AppProps, AppStore> {     // ...   
}      
// FunctionComponent   interface AppProps {     value?: string;   }   
const App: React.FC<AppProps> = ({ value = "", children }) => {     //...   
};   
  • 不使用 TypeScript,可以使用 propTypes定义 props类型;
const UserInfo = (props) => {     
return (       
  <div> {props.name} : {props.age}</div>     
);   
};      
UserInfo.propTypes = {     
  name: PropTypes.string.isRequired,     
  age: PropTypes.number.isRequired,   
};   

9. 把字符串当做数值传递到组件

问题描述

由于 React 也有模版语法,跟 HTML 非常类似,所以经常出现将数字直接作为 props 传给组件,导致取值判断的时候不符合预期:

<MyComp count="99"></MyComp>   

MyComp组件中通过 props.count === 99就会返回 false

解决方法

正确的做法应该是用大括号来传参:

<MyComp count={99}></MyComp>   

10. 没有以大写字母开头的组件名称

问题描述

对于新手而言,忘记使用大写字母开头作为组件名的问题很常见。在 JSX/TSX 中以小写字母开头的组件会被编译成 HTML 元素,比如 <div /> 表示 HTML 标签。

class myComponent extends React.component {}   

解决方法

只要把首字母改为大写即可:

class MyComponent extends React.component {}   

11. 错误的为元素绑定事件

问题描述

import { Component } from "react";      
export default class HelloComponent extends Component {     
  constructor() {       super();       
    this.state = {         
      name: "Helloworld",       
    };     
  }        
  update() {       
    this.setState({ name: "Helloworld!" });     
  }     
  render() {       
    return (         
      <div><button onClick={this.update}>update</button></div>
    );     
  }   
}   

当点击 update按钮时,控制台会报错:

Cannot read properties of undefined (reading 'setState')   

解决方法

这是因为 this指向问题,解决方法有以下几种:

  • 在构造函数中绑定
constructor() {     
super();     
this.state = {       
  name: "Helloworld"   
};     
this.update = this.update.bind(this);   
}   
  • 使用箭头函数
update = () => {     this.setState({ name: "Helloworld!" });   };   
  • 在 render 函数中绑定(不建议,每次组件渲染创建一个新函数,影响性能)
<button onClick={this.update.bind(this)}>update</button>   
  • 在 render 函数中使用箭头函数(不建议,每次组件渲染创建一个新函数,影响性能)
<button onClick={() => this.update()}>update</button>   
点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
3年前
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发React项目的效率,笔者结合自己的实际工作经验,汇总如下React项目常用插件.1.状态管理ReduxJavaScript状
徐小夕 徐小夕
3年前
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发React项目的效率,笔者结合自己的实际工作经验,汇总如下React项目常用插件.1.状态管理ReduxJavaScript状
Easter79 Easter79
3年前
ssh 在大厂写React,学到了什么?
前言进入大厂搬砖也有3个月了,我工作中的技术栈主要是ReactTypeScript,这篇文章我想总结一下如何在项目中运用React的一些技巧解决一些实际问题,本文中使用的代码都是简化后的,不代表生产环境。生产环境的代码肯定比文中的例子要复杂很多,但是简化后的思想应该是相通的。取消请求如果在React里当前正在
Wesley13 Wesley13
3年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Stella981 Stella981
3年前
React项目中应对开发、测试、生产环境下使用不同全局常量的问题
在开发过程中,避免不了后端在开发、测试、生产环境不一致的情况,这不最近就遇到这样的问题:在开发和测试环境,后端需要一个参数比如:zonehk1,在生产环境中需要的参数又是zonehka,那么解决这种问题的方法也不是唯一的,这里只介绍一种通过配置文件完成的过程。我们在构建react项目时,会执行npmruneject,导出react脚手架
Easter79 Easter79
3年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx