为什么我在使用 hooks 时不能使用 camelCase 来命名反应箭头功能组件？

Question

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

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'

没关系，但是当我使用 hook 时出现错误。命名有什么问题？

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

Answer 1

导出时命名并不重要。渲染时很重要。例如：

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

相反，相同：

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

React JSX 组件必须大写。

为什么我在使用 hooks 时不能使用 camelCase 来命名反应箭头功能组件？

Why i cant use camelCase in naming react arrow function components while using hooks?

reactjs

react-hooks