const Component = () => (<div></div>) 和 const Component = () => {return(<div></div>)}是一样的吗反应？

Question

我猜它们是相同的，因为输出相同，但它是 Redux 中的官方 shorthand 还是 Javascript 属性？我正在关注 Redux documentation 并且有一个这样的组件：

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

还有另一个组件：

const AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input ref={node => (input = node)} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  )
}

我想知道这是否与 Javascript 或 React 有关。

我理解在Javascript中，箭头函数需要有一个() like

(name, description) => ({name: name, description: description});

描述它是一个对象而不是内联单表达式语法的普通函数，但我不确定这是否适用于 Redux 示例，因为 JSX 部分不是对象。请帮我解决我的错误。

Answer 1

简短的回答，是的，因为 JSX 和 React 遵循 JavaScript 使用的完全相同的语法，因为 JSX 只是 React 的语法扩展。您可以通过 here.

阅读更多关于 JSX 的内容

此外，关于你关于 redux 的观点，你的 redux 应该完全用 JavaScript（或 TypeScript）编写，没有任何 JSX 语法，因为你的 redux store 的主要 objective 是维护应用程序的状态，而不是呈现逻辑。

Answer 2

主要是为了便于阅读，你可以省略括号，它的功能是一样的

const App = () => 
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>

但是当你在组件内部有一个主体并且想要 return JSX 换行时你必须用括号括起来以避免 ASCI（自动分号插入）

const App = () => {
  const x = 'something'

  return (
    <div>
      <AddTodo />
      <VisibleTodoList />
      <Footer />
    </div>
  )
}

const Component = () => (<div></div>) 和 const Component = () => {return(<div></div>)}是一样的吗反应？

Is const Component = () => (<div></div>) the same as const Component = () => {return(<div></div>)} in React?

javascript

parentheses

reactjs

redux