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

作者：pingan8787

2022 年 8 月 15 日
福建
本文字数：4191 字
阅读完需：约 14 分钟

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

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

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

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

渲染列表时，不使用 key
直接通过赋值方式修改 state 值
将 state 值直接绑定到 input 标签的 value 属性
执行 setState 后直接使用 state
使用 useState + useEffect 时出现无限循环
忘记在 useEffect 中清理副作用
错误的使用布尔运算符
没有定义组件参数类型
把字符串当做数值传递到组件
没有以大写字母开头的组件名称
错误的为元素绑定事件

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值。

文档介绍

React - Basic List Component

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

问题描述

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

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

复制代码

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

Do not mutate state directly. Use setState().

复制代码

解决方法

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

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

复制代码

文档介绍

React - State and Lifecycle React - Using the State Hook

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 datathis.state = { name: "Chris1993" };
// update state datathis.setState({ name: "Hello Chris1993!" });console.log(this.state.name); // output: Chris1993

复制代码

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

解决方法

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

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

复制代码

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

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()可以看做是类组件中componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合。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]);

复制代码

文档介绍

React - Example Using Hooks

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

问题描述

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

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

复制代码

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

解决方法

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

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

复制代码

页面就能显示空内容了。

文档介绍

React - Inline If with Logical && Operator

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

问题描述

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

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

复制代码

解决方法

解决方法有

使用 TypeScript ，定义组件 props类型；

// ClassComponentinterface AppProps {  value: string;}interface AppState {  count: number;}
class App extends React.Component<AppProps, AppStore> {  // ...}
// FunctionComponentinterface 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 {}

复制代码

文档介绍

React - Rendering a Component

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

问题描述

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

复制代码

当点击 update按钮时，控制台会报错：

Cannot read properties of undefined (reading 'setState')

复制代码

解决方法

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

在构造函数中绑定

constructor() {  super();  this.state = {    name: "Chris1993"  };  this.update = this.update.bind(this);}

复制代码

使用箭头函数

update = () => {  this.setState({ name: "Hello Chris1993!" });};

复制代码

在 render 函数中绑定（不建议，每次组件渲染创建一个新函数，影响性能）

<button onClick={this.update.bind(this)}>update</button>

复制代码

在 render 函数中使用箭头函数（不建议，每次组件渲染创建一个新函数，影响性能）

<button onClick={() => this.update()}>update</button>

复制代码

文档介绍

React - How do I pass an event handler (like onClick) to a component?

如果您觉得本文不错，欢迎点赞评论关注，您的支持是我分享的最大动力。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/e9603fed2a3eadd90276e134e】。文章转载请联系作者。

pingan8787

关注

🏅「前端自习课」公众号 2018.02.24 加入

🌼 前端宝藏小哥哥

发布

暂无评论

创作场景

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

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

问题描述

解决方法

文档介绍

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

问题描述

解决方法

文档介绍

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

问题描述

解决方法

4. 执行 setState 后直接使用 state

问题描述

解决方法

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

问题描述

解决方法

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

问题描述

解决方法

文档介绍

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

问题描述

解决方法

文档介绍

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

问题描述

解决方法

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

问题描述

解决方法

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

问题描述

解决方法

文档介绍

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

问题描述

解决方法

文档介绍

pingan8787

评论