当前栏目
自认为精通React,这些JavaScript概念你掌握了没?
本文转载自公众号“读芯术”(ID:AI_Discovery)
想要确定一个人是否掌握React,考考他最新的JavaScript语法就可以了。JavaScript语法对于理解React至关重要,它能让我们更加容易地阅读日志,编写出更简洁的React代码。
一旦掌握了一些新的JavaScript语法,编写React代码将变得轻而易举。来看看精通React不可缺少的关键概念吧!
箭头功能
箭头功能非常重要,它让功能变得更短,更整洁,并且不必担心this。现在,React有了hooks API,就可以在任何地方使用箭头功能了。
例如,可以将箭头函数与hooks API结合使用,如下所示:
- importReact from "react";
- const App = () => {
- return <divclassName="App">foo</div>;
- };export default App;
在上面的代码中,使用箭头函数定义了一个非常简单的React组件。该代码仅显示静态文本,但是可以通过动态功能轻松地对其进行扩展。
你还可以编写以下代码,将hooks添加到应用程序零件中:
- importReact, { useState } from "react";
- const App = () => {
- const [count, setCount] =useState(0); return (
- <div className="App">
- <button onClick={() =>setCount(count => count + 1)}>increment</button>
- <p>{count}</p>
- </div>
- );
- };export default App;
在以上代码中,有useState作为hooks,用来更新计数状态。
在onClick prop.中使用该代码。接着传入了一个箭头函数,该函数调用 setCount 功能。在这个代码里面,还有另一个箭头功能来更新现有的计数状态。
笔者认为不必使用this。传统功能或bind函数可以随时随地借助hooks API。hooks API只是变得更简洁,使用箭头功能时为我们省去了不少麻烦。
带箭头功能hooks API的简化,使React从基于类的组件过渡到基于函数的组件。
箭头函数对于操纵数组非常有用,因为数组方法通常会在回调中传递,而传递回调的优秀方法是使用箭头函数。例如,如果要过滤项目并在React中显示它们,可以使用filter和map,方法如下:
- importReact from "react";const users = [
- { user: "foo", active: true},
- { user: "bar", active: false},
- { user: "baz", active: false}
- ];const App = () => {
- return (
- <div className="App">
- {users
- .filter(u => u.active)
- .map((u, i) => (
- <p key={i}>{u.user}</p>
- ))}
- </div>
- );
- };export default App;
在上面的代码中,有user数组,在应用程序通过调用带箭头函数的filter,将active设置为 true。然后通过map,在由filter返回的数组上映射user内部属性,以在数组中呈现用户名。接着你就能看到屏幕上显示“ foo”。
箭头函数让代码简短明了,你可以永远不必在代码中写function这个词或者处理this这个值。
默认参数
默认参数可以在代码中使用默认值,将参数添加到函数中。在React代码中,大多使用默认参数以及带有对象参数的解构语法,它可以将属性分解为变量并有选择地使用。
例如,可以将默认参数写入代码,如下所示:
- importReact from "react";const Greeting = ({
- greeting = "hello",
- firstName = "jane",
- lastName = "smith"
- }) => (
- <p>
- {greeting} {firstName} {lastName}
- </p>
- );const App = () => {
- return <Greetinggreeting="hi" />;
- };export default App;
箭头函数,解构和默认参数是JavaScript功能中最有用的两个功能,可以看到,React代码被大大精简了,可读性也增强了。你学会了嘛?
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件