自认为精通React，这些JavaScript概念你掌握了没？-白红宇

自认为精通React，这些JavaScript概念你掌握了没？

阅读量：2089 次

发布时间：2019-04-29

本文共 2568 字，大约阅读时间需要 8 分钟。

全文共1610字，预计学习时长8分钟

自认为精通React，这些JavaScript概念你掌握了没？

图源：unsplash

想要确定一个人是否掌握React，考考他最新的JavaScript语法就可以了。JavaScript语法对于理解React至关重要，它能让我们更加容易地阅读日志，编写出更简洁的React代码。

一旦掌握了一些新的JavaScript语法，编写React代码将变得轻而易举。来看看精通React不可缺少的关键概念吧！

自认为精通React，这些JavaScript概念你掌握了没？

箭头功能

箭头功能非常重要，它让功能变得更短，更整洁，并且不必担心this。现在，React有了hooks API，就可以在任何地方使用箭头功能了。

例如，可以将箭头函数与hooks API结合使用，如下所示：

importReact from "react";const App = () => {  return 
   
    foo;};export default App;

在上面的代码中，使用箭头函数定义了一个非常简单的React组件。该代码仅显示静态文本，但是可以通过动态功能轻松地对其进行扩展。

你还可以编写以下代码，将hooks添加到应用程序零件中：

importReact, { useState } from "react";const App = () => {  const [count, setCount] =useState(0);  return (    
         
          
    {count}
    
   
  );};export default App;

在以上代码中，有useState作为hooks，用来更新计数状态。

在onClick prop.中使用该代码。接着传入了一个箭头函数，该函数调用 setCount 功能。在这个代码里面，还有另一个箭头功能来更新现有的计数状态。

自认为精通React，这些JavaScript概念你掌握了没？

图源：pexels

笔者认为不必使用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 (    
   
          {users        .filter(u => u.active)        .map((u, i) => (          
    {u.user}
        ))}    
   
  );};export default App;

在上面的代码中，有user数组，在应用程序通过调用带箭头函数的filter，将active设置为 true。然后通过map，在由filter返回的数组上映射user内部属性，以在数组中呈现用户名。接着你就能看到屏幕上显示“ foo”。

箭头函数让代码简短明了，你可以永远不必在代码中写function这个词或者处理this这个值。

自认为精通React，这些JavaScript概念你掌握了没？

默认参数

默认参数可以在代码中使用默认值，将参数添加到函数中。在React代码中，大多使用默认参数以及带有对象参数的解构语法，它可以将属性分解为变量并有选择地使用。

例如，可以将默认参数写入代码，如下所示：

importReact from "react";const Greeting = ({  greeting = "hello",  firstName = "jane",  lastName = "smith"}) => (      {greeting} {firstName} {lastName}  
);const App = () => {  return 
   ;};export default App;

以上代码定义了Greeting组件，该组件具有以下对象参数：

{  greeting = "hello",  firstName = "jane",  lastName = "smith"}

由于第一个参数Greeting是个props参数，可以对其进行解构，使之成为变量，而不必重复地写赋值操作。在上面的代码中，设置了Greeting的默认值为'hello' ，firstName 的默认值为 'jane' ，lastName 的默认值为'smith' 。

然后，可以像以上代码一样跳过一些属性，在屏幕上显示“ hi jane smith”。这个代码比之前分解语法的默认属性短。例如，在没有像上面那样设置默认参数的情况下，React也具有默认属性，编写如下：

importReact from "react";const Greeting = ({ greeting, firstName, lastName}) => (      {greeting} {firstName} {lastName}  
);Greeting.defaultProps = {  greeting: "hello",  firstName: "jane",  lastName: "smith"};const App = () => {  return 
   ;};export default App;

自认为精通React，这些JavaScript概念你掌握了没？

图源：unsplash

箭头函数，解构和默认参数是JavaScript功能中最有用的两个功能，可以看到，React代码被大大精简了，可读性也增强了。你学会了嘛？

自认为精通React，这些JavaScript概念你掌握了没？

一起分享AI学习与发展的干货

欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

转载地址：http://qghqf.baihongyu.com/

你可能感兴趣的文章