Reactjs 为什么在使用钩子时不能使用camelCase命名react-arrow函数组件？

让我困惑的问题是：按照惯例，我在react中为箭头函数组件命名，以小写字母开头：

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

        </div>
    )
}

export default todo

为了成功编译，我需要将组件重命名为“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

import React，{useState}来自“React”
const Todo=props=>{
const[todoName，setTodoName]=useState（“”）
常量[todoList，setTodoList]=useState（[]）
//const[todoState，setTodoState]=useState（{userInput:''，todoList:[]}）
常量inputChangeHandler=（事件）=>{
setTodoName（event.target.value）
//固定({
//用户输入：event.target.value，
//todoList:todoState.todoList
// })
}
常量ToLoadHandler=（）=>{
setTodoList（todoList.concat（todoName））
//setTodoState（{userInput:todoState.userInput，todoList:todoState.todoList.contact（todoState.userInput）}）
}
返回(
添加待办事项

{todoList.map（todo=>(
{todo}
))}

)
}
导出默认待办事项

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

从“/components/todo”导入todo；
//错误

相反，相同的：

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

从“/components/Todo”导入Todo；
//嗯

---

React JSX组件必须大写。

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

useState

的地方发布代码吗？组件始终以大写名称大小写开头。正常的命名案例被视为javascriptfunction@ShubhamVerma你的意思是创建一个组件吗？我不是说像那样渲染。因为组件是箭头函数，所以在这种情况下必须用小写字母命名。@WhoIsDT每当你有一个定义为类的函数（在这种情况下是它的组件）时，最好使用大写字母，因为这是语言之间常见的命名约定，比小写字母更清楚，也就是说，它与代码的实际功能无关，因此您可以随意调用它。在javascript中，如果您以大写字母命名，它将被视为es5类。更多信息：好的，谢谢！我会知道：）

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

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