自认为精通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 foo

;

};export default App;

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

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

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

在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 (
{users
.filter(u => u.active)
.map((u, i) => (
{u.user}
))}

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