React 开发者常见的 3 个错误

更新日期: 2020-04-20阅读: 1.6k标签: React

关于前端开发,我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架,但仍然一无所知。

因为我们都在学习,这也意味着我们都容易犯错误。没关系,我们的目的是变得更好。如果你犯了一个错误并从中吸取教训,你就做得很好!但是如果你没有学到任何新的东西,并且不断重复犯同样的错误,emmm。。。可能你的职业生涯就会停滞不前。

本着这种精神,下面是我在 CodeReview 初级开发同学时经常看到的三个错误。我们一起来 check 一下,然后讨论如何改正它。


直接修改状态

在更新 react 组件状态时,最重要的是调用 setState 方法去更新,并且传入的对象是一个新的副本,而不是直接修改之前的状态。如果你错误地修改了组件的状态,React Diff 算法将无法捕获更改,而且你的组件也无法正确地更新。让我们来看一个例子。

假设你有这样的状态:

this.state = {    colors: ['red', 'green', 'blue']}

现在你想要给这个数组添加颜色:

// 方法1:this.state.colors.push('yellow’)// 方法2:this.state.colors = [...this.state.colors, 'yellow’]

这两种方法都是错误的!在更新类组件中的状态时,必须使用 setState 方法,并且应该注意不要改变原始对象。下面是添加元素到数组的正确方法:

this.setState(prevState => ({ colors: [...prevState.colors, 'yellow'] }))


忘记了 setState 的批量更新

setState 有两种使用方法。第一种方法是传入一个对象作参数。第二种方法是传入一个函数作参数。你知道这两种方法分别应该在什么时候使用吗?

例如,如果你有一个可以启用或禁用的按钮,那么你可能会有一个名为 isDisabled 的状态,其中包含一个布尔值。如果你想切换这个按钮的状态,你可能很会写这样的一段代码

// setState 使用一个对象作参数this.setState({ isDisabled: !this.state.isDisabled })

那么,这有什么问题呢?问题在于 React 状态更新可以批处理(batchUpdate),这意味着多个状态更新可以在一个更新周期中发生。如果你的更新将被批处理,并且你对 isDisabled 状态有多个更新,那么最终结果可能不是你所期望的。

更新状态的更正确的方法是提供前一个状态的函数作为参数:

this.setState(prevState => ({ isDisabled: !prevState.isDisabled }))

现在,即使你的状态更新被批处理,并且有多个更新都在操作 isDisabled 状态,但每个更新都依赖于正确的先前状态,因此你总是会得到预期的结果。

类似的递增计数器也是如此。

// 不要这样做this.setState({ counterValue: this.state.counterValue + 1 })// 正确的写法this.setState(prevState => ({ counterValue: prevState.counterValue + 1 }))


忘记了 setState 是异步的

最后,记住 setState 是一种异步方法是很重要的。

初学者可以先理解成异步,但严格意义上说,需要区分条件来看。

如:在 React 内部生命周期以及事件处理函数中是异步的。

如:在 setTimeout 函数中调用 setState 却是同步的。

举个例子,假设我们有一个如下状态的 React 组件:

this.state = { name: 'John' }

有一个方法更新状态,并将新的状态打印到控制台上:

this.setState({ name: 'Matt' })console.log(this.state.name)

你可能认为打印出来的会是 Matt ,但它不会! 它会打印 John !

这是因为 setState 是异步的。这意味着执行到 setState 时,会把真正更新的操作放在异步队列中去执行,但它下面的同步代码将立即执行,所以打印出来的 state 就不是最新的。

如果你想拿到更新完成后的最新状态,React 允许你传一个回调函数,该函数会在更新完成后运行。

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

问题解决了! 现在它可以正确地记录 Matt 了。


链接: https://fly63.com/article/detial/9326

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!