改进意见

[buddydeus]

learn-react-step-by-step/blog/src/components/AuthContext.js

Line 14 in 8a609ab

useEffect(() => {

一般不会这么做，AuthProvider 中主要控制登入状态是否失效和初始token是否加载并更新到 ApiService 中默认处理，是否写入 localStorage 都是在 login / logout 函数中控制的。

learn-react-step-by-step/blog/src/components/useAuthRoute.js

Line 5 in 8a609ab

function useAuthRoute() {

这个文件一般和 AuthContext 写在一起，如果不用 redux，会有比较多的 Provider 会有个专门的目录来放这些东西。

learn-react-step-by-step/blog/src/components/navbar/index.js

Line 4 in 8a609ab

import styles from './navbar.module.css';

css，这么写有点浪费，react 如果不用 less/sass 的话，会用 styled-components 这个组件来写，叫 css-in-js

learn-react-step-by-step/blog/src/components/navbar/index.js

Line 3 in 8a609ab

import { useLocation } from "react-router-dom";

这个组件不太好用，一般用 react-router

learn-react-step-by-step/blog/src/components/navbar/index.js

Line 13 in 8a609ab

{location.pathname === '/login' ? (

类似这种三元语法在 jsx 中减少使用，会造成 react diff 计算错误，引起更新延迟

{ location.pathname === '/login' && (<a href="/">Home</a>) }
{ location.pathname !== '/login' && (<a href="/">Home</a>) }

更多的时候用下面这个，虽然代码多，但更通用一点。

const [nav, setNav] = useState<{ href:string; name: '' }>({ href: '/login', name: 'Login' });

useEffect(()=>{
  if(location.pathname === '/login') setNav({ href: '/', name: 'Home' });
}, [location.pathname])

return (
  <a href='{nav.href}'>{ nav.name }</a>
)

learn-react-step-by-step/blog/src/components/navbar/index.js

Line 6 in 8a609ab

function Navbar() {

这个定义方式不太对

const Navbar = React.memo((props)=>{
  return (<></>)
})

learn-react-step-by-step/blog/src/components/menubar/index.js

Line 9 in 8a609ab

const handleLogout = (event) => {

react 中避免使用类似这种函数定义，会造成引用的组件频发属性（因为react会认为他每次都是新的造成 props 频繁更新。

const handleLogout = useCallback((event)=>{
}, [])

learn-react-step-by-step/blog/src/pages/CommentAdd/index.js

Line 40 in 8a609ab

<form onSubmit={handleSubmit}>

一般情况不使用 form，都用了 ajax 请求了，表单没什么用（包括上传文件，现在也很少用 form）

learn-react-step-by-step/blog/src/pages/CommentList/index.js

Line 6 in 8a609ab

import { collection, query, where, getDocs } from "firebase/firestore";

这什么组件，看上去很难用的样子。在一般写引用的时候，要尽量减少吧sql语法暴露出来。尽量用 restfulApi 或者 graphQL（或者封装函数成一个 apiService）

learn-react-step-by-step/blog/src/pages/PostEditPage/index.js

Line 17 in 8a609ab

useEffect(() => {

在一个组件中，所有的 hooks 需要遵循一定的顺序申明，否则容易引起变量更新的时许问题。

useContext > useState > useCallback > useMemo > useEffect
// 不确定的 hooks 当 useState 处理

learn-react-step-by-step/blog/src/pages/PostComment/index.js

Line 38 in 8a609ab

<Fragment>

Fragment 的含义是，当你的组件需要返回两个根节点时，用这个临时包裹一下，如果只有一个根节点，不要用它。他本质上是一个语法提示，react在处理这种组件时会给 Fragment 加上key，而忽略里面的根节点，导致 diff 算法时有性能问题