那是什么类型的组件初始化？

Question

我是反应的初学者。我想知道在下面的Post组件中是什么样的初始化？这是函数吗？为什么没有声明函数或呈现函数的大括号{}？

我需要更详细地理解代码，这样我就可以根据我的需求来修改它。如何向其添加参数并根据特定id返回post。

import React from "react"
import Async from "react-async"

const loadPosts = () =>
 fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())

const Posts = () => (
  <Async promiseFn={loadPosts}>
    {({ data, error, isLoading }) => {
      if (isLoading) return <div>Fetching data... Please Wait</div>

      if (error) return <div>Something went wrong: ${error.message}</div>

      if (data){
          const responseData = data.map((post)=>{
            return(
              <div>
               <p> {post.title} </p>
               <hr />
               <h1> {post.body} </h1>
              </div>
            )
          })
        return(
          <div>
           {responseData}
          </div>
        )
       }
      return null
    }}
  </Async>

)

export default Posts

Answer 1

这是一个“胖”箭头函数表达式。这是一个ES6特性：https://codeburst.io/javascript-arrow-functions-for-beginners-926947fc0cdc

需要注意的几件事情(以及其他事情)是，没有"this“的绑定，函数表达式也没有像函数声明那样被提升。

Answer 2

这是一个正常的功能组件。如果只是返回没有任何语句的内容，则不需要箭头函数的大括号。

const sum = (a, b) => a + b;

上面的箭头函数将a和b的和返回为sum。功能组件也是如此。

Answer 3

这是一个反应组合的概念，看看它的这里。