为什么我在使用钩子时不能使用 camelCase 命名反应箭头功能组件？答案

【问题标题】：Why i cant use camelCase in naming react arrow function components while using hooks?为什么我在使用钩子时不能使用 camelCase 命名反应箭头功能组件？
【发布时间】：2019-06-06 10:18:35
【问题描述】：

令我困惑的问题是：作为惯例，我在 react 中为箭头函数组件命名，从小写字母开始：

const todo = () => {
    return (
        <div>

        </div>
    )
}

export default todo

然后，我尝试使用 'useState' Hook，并出现错误：

Failed to compile.

./src/components/Todo.js
  Line 4:  React Hook "useState" is called in function "todo" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

为了成功编译，我需要将组件重命名为 'Todo'

在 App.js 中我像这样使用它：

import Todo from './components/Todo'

这没关系，但是当我使用钩子时，我得到了错误。命名有什么问题？

UPD

组件的完整代码。我想将它重命名为 const todo，而不是 const Todo。为什么我会出错？

import React, {useState} from 'react'

const Todo = props => {
    const [todoName, setTodoName] = useState('')
    const [todoList, setTodoList] = useState([])

    // const [todoState, setTodoState] = useState({userInput: '', todoList: []})

    const inputChangeHandler = (event) => {
        setTodoName(event.target.value)
        // setTodoState({
        //    userInput: event.target.value,
        //    todoList: todoState.todoList 
        // })
    }

    const todoAddHandler = () => {
        setTodoList(todoList.concat(todoName))
        // setTodoState({userInput: todoState.userInput, todoList: todoState.todoList.contact(todoState.userInput)})
    }

    return (
      <div>
        <input type='text' placeholder='Todo' onChange={inputChangeHandler} value={todoName} />
        <button onClick={todoAddHandler}>Add todo</button>
        <ul>
          {todoList.map(todo => (
            <li key={todo}>{todo}</li>
          ))}
        </ul>
      </div>
    )
}

export default Todo

【问题讨论】：

你能把代码贴在你尝试使用useState的地方吗？
组件总是以大写字母开头。正常命名案例视为 javascript 函数
@ShubhamVerma 你的意思是创建组件吗？我不是在谈论像这样的渲染。由于组件是_箭头函数，在这种情况下它必须以小写字母命名。
@WhoIsDT 每当您有一个定义为类的函数（在本例中为它的组件）时，最好使用大写字母，因为这是语言之间的通用命名约定，而且很多比小写字母更清楚，这表示它与代码的实际功能无关，因此您可以随意称呼它。在 javascript 中，如果您以大写命名大小写开头，则将其视为 es5 类。更多信息在这里：stackoverflow.com/questions/1564398/…
好的，谢谢！我会知道的:)

标签： reactjs react-hooks

【解决方案1】：

导出时命名无关紧要。渲染时很重要。例如：

import todo from './components/todo';
<todo /> // error

相反，同样的：

import Todo from './components/todo';
<Todo /> // ok

React JSX 组件必须大写。

【讨论】：

但正如我所说，我可以命名 const todo = () => {}。而不是 const Todo = () = {} 并且我可以正确地将其导入为导入 Todo ！！！所以编译没有问题！仅在我尝试使用 HOOK 时出错！
是的，钩子也需要函数的大写名称，以区别于普通函数