既然你自认为精通React，那你掌握了这些JavaScript概念了吗？
时间：2023-03-19 17:29:29
科技观察
本文转载自公众号《阅读核心》（ID：AI_Discovery）要想判断一个人是否掌握了React，只要测试他最新的JavaScript语法即可。JavaScript语法对于理解React至关重要，它使我们更容易阅读日志并编写更简洁的React代码。一旦掌握了一些新的JavaScript语法，编写React代码将变得轻而易举。一起来看看掌握React不可或缺的关键概念吧！箭头函数箭头函数非常重要，它们使函数更短、更简洁，并且不必为此担心。现在React有了hooksAPI，箭头函数可以在任何地方使用。例如，箭头函数可以与hooksAPI结合使用，如下所示：importReactfrom"react";constApp=()=>{returnfoo
;};exportdefaultApp;在上面的代码中，使用箭头函数定义了一个非常简单的React组件。该代码仅显示静态文本，但可以轻松地使用动态功能对其进行扩展。也可以编写如下代码为应用部分添加钩子：importReact,{useState}from"react";constApp=()=>{const[count,setCount]=useState(0);return(
setCount(count=>count+1)}>增量{count}
);};exportdefaultApp;上面的代码中，使用了useState作为钩子来更新计数状态。在onClick道具中使用该代码。然后传递一个箭头函数，其中调用setCount函数。在这段代码中，还有另一个箭头函数来更新现有的计数状态。我认为没有必要使用它。传统函数或绑定函数可以随时随地利用hooksAPI。hooksAPI变得更简洁了，让我们在使用箭头函数时省去了很多麻烦。使用箭头函数钩子简化API，允许React从基于类的组件过渡到基于函数的组件。箭头函数对于操作数组非常有用，因为数组方法通常在回调中传递，传递回调的一个极好的方法是使用箭头函数。例如，如果你想在React中过滤项目并显示它们，你可以像这样使用filter和map：importReactfrom"react";constusers=[{user:"foo",active:true},{user:"bar",active:false},{user:"baz",active:false}];constApp=()=>{return(
{users.filter(u=>u.active).map((u,i)=>({u.user}))} );};exportdefaultApp;上面代码中，有一个user数组，在applicationfilter中用箭头函数调用，设置active为true。然后使用map将用户内部属性映射到filter返回的数组上，渲染数组中的用户名。然后您应该会在屏幕上看到“foo”。箭头函数使代码简短明了，您永远不必在代码中编写单词function或处理this的值。默认参数默认参数可以在代码中使用，为具有默认值的函数添加参数。在React代码中，大多使用默认参数和带有对象参数的解构语法，可以将属性分解为变量并有选择地使用它们。例如，可以将默认参数写入代码如下：importReactfrom"react";constGreeting=({greeting="hello",firstName="jane",lastName="smith"})=>(
{greeting}{firstName}{lastName}
);constApp=()=>{return
;};exportdefaultApp;箭头函数，解构和默认参数是两个最有用的JavaScript函数函数，可以看到，React代码得到了极大的简化，可读性也得到了增强。你学会了吗？
