Open creamidea opened 1 year ago
Bad:
export default function() {}
Good:
export default function Component() {}
function Component({ title, value }) { ... }
useReducer
Bad code:
const [count, setCount] = useState(0); const [name, setName] = useState(""); const onClick = () => { setTimeout(() => { setName("John"); setCount(count + 1); }, 1000); };
Good code:
const [state, setState] = useState({ count: 0, name: "", }); const onClick = () => { setTimeout(() => { setState((prevState) => ({ ...prevState, name: "John", count: prevState.count + 1, })); }, 1000); };
return ( <div> <button onClick={() => { setCount(1); // ... }} > Click </button> </div> );
const onClick = useCallback(() => { setCount(1); // ... }, [deps]); return ( <div> <button onClick={onClick}>Click</button> </div> );
object(Map)
switch
switch (props.type) { case "ADMIN": return <Admin />; case "USER": return <User />; default: return <NotFound />; }
const componentMap = { ADMIN: Admin, USER: User, NOT_FOUND: NotFound, }; const Component = componentMap[props.type]; return <Component />;
Better code:
const componentMap = { ADMIN: React.lazy(() => import("../components/Admin")), USER: React.lazy(() => import("../components/User")), NOT_FOUND: React.lazy(() => import("../components/NotFound")), }; const Component = componentMap[props.type]; return <Component />;
return <button disabled={true}>Submit</button>;
return <button disabled>Submit</button>;
return <Component></Component>;
return <Component />;
参考文档:
每个组件控制状态尽量少,不要将所有状态维护在一个组件
Context 需要读写分离处理
优先使用 ahooks 等社区优秀 Hooks 库提供的方法
合理使用 useEffect
合理使用 useCallback/useMemo 能不用就不用
函数组件都要命名名称,不要使用匿名函数
Bad:
Good:
函数组件的入参尽量使用结构的形式
更新多个状态,请合理抽象到一个对象。或者考虑使用
useReducer
Bad code:
Good code:
不要在 JSX 里面写函数
Bad code:
Good code:
使用
object(Map)
替代switch
Bad code:
Good code:
Better code:
布尔类型,简短处理
Bad code:
Good code:
如果没有子元素,就自闭处理
Bad code:
Good code:
参考文档: