11 个需要避免的 React 错误用法
随着 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 LifecycleReact - 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 data
this.state = { name: "Chris1993" };
// update state data
this.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类型;// 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 {}
文档介绍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到底是什么?为什么它那么受欢迎?它到底解决了什么问题?答案:React是一个用于构建用户界面的、声明式、组件化的JavaScript库。 JavaScript库?声明式?组件化?不是说好了是小白秘籍吗? 好吧,上面那行字是从官方网站拷过来拼凑的。接下来,让我用另一种方式为你讲解React。很负责任地说,只要你
-
创投圈大小事,你都能尽在掌握 腾讯创业|ID:qqchuangye 【腾讯编者按】布拉德·克里斯平(BradCrispin)原本是客户服务行业的一名从业人员,在30岁之后才开始学习编程,最后成为在线教育平台Udacity的高级工程师。他是怎么做到的?近日,克里斯平在社交网站Medium撰文讲述了自己从零开始学习编程到
-
FlutterWidget的设计灵感来源于React,是一款原生就立足于响应式的UI框架。本文基于Flutter特点,试图结合闲鱼在Flutter的工程应用来谈下我们对FlutterReact编程范式的思考和践行。 Reactive的诞生谈起UI总会讲到MVC,它出现的时间很早,那时候还没有普及现代GUI广泛使用的事件
-
作者|OvieOkeh 译者|王强 这个题目可能有点夸张,但不管怎样Svelte和它的理念就是这样的。如果你还没听说过Svelte的话就去了解一下吧--你会见证一场革命的,它将取得空前的成就(没有给Svelte团队增加压力的意思)。 本文不是Svelte的入门教程。Svelte团队已经做了一份很棒的交互式手把手入门教
-
JavaScript每天都在出现大量的框架和工具,而React是除了上次我们提到的Vue和Ember之外另一款比较流行的框架。但因为新的工具每天都在不断的出现,开发者在尝试时总会有些不知所措。因此,当为你的新React项目选择合适的IDE,合适的可视化工具甚至是合适的样式时,你都会有很多选择,你该怎么选择合适的?这是
-
React已经火到不行了,相信大家伙儿或多或少的看过或者自己动手实践过一些demo,所以关于一些基础的概念我这里就不再赘述,大家可以在km或者google上搜索"React入门"。网上的大多数demo都是静态渲染的例子,只是玩具,并不能很好的体现实际开发过程。兴趣部落PC版在生产环境采用了React,这里给大家分享一下
-
但是我们知道,JavaScript作为一个动态语言,你想用静态的方式去分析它是非常复杂一件事情,我们只要稍微在刚才的例子中加入一点动态的写法,这些框架就可能编译失败。 下面是一个用react-reconciler这个包去实现一个迷你ReactDOM的例子,我们需要给ReactReconciler方法传入一个配置,这
-
React是最热门的前端技术,这已不是什么秘密。越来越多的大厂,都优先考虑用React做项目,在面试中也经常会考察对React的理解。 React技术是开发Web应用的一把利器。不过在实际工作中,很多前端开发者都存在一个误区:过于关注和强调"最新框架""最新版本",缺乏对前端发展历史的深度了解,也缺少对前端新技术新领域
-
作者:zhiqiang21 blog.csdn.net/yisuowushinian/article/details/78011330 前言: 虽然说是记录fis3+react的一次开发经历。但是在项目的上线前几天收到公司TC委员会的邮件,因为react的开源协议让找到react的替代方案,并且逐步下线线上的react
-
导读:如果你正在用React.js或ReactNative来开发用户界面的话,试试这些框架。本文字数:7739,阅读时长大约:9分钟 https://linux.cn/article-13796-1.html 作者:AmitDua 译者:zpl1025 React.js和ReactNative都是用来开发用户界面(U