不会这些的实习生，千万别给他做React，刚被领导痛批闯大祸了...

React 框架虽说要学习的东西有很多，种类很杂，但是一般的实习生稍微学几章也能做，因为简单的页面逻辑也就那些，但是有很多细节是需要注意到的，不然仅仅是写页面逻辑，也要闯大祸的。所以必须要知晓这些，才能放心给新手做页面。

1.不用State

让实现一个页面，但是却没有用状态管理。

比如要实现一个提示内容。结果却这样实现

let tip:string = 'tip content';

return (
<div>{tip}</div>
)

那如果提示的内容变化呢，再赋值给tip页面就不会刷新了。

state用法 be like：

const [tipState,setTipState] = useState<string>('tip Content');

return(
    <div>{tipState}</div>
)

每次state变化时，只要使用setTipState(xxx)就可以了

2.滥用State/State不规范

要注意的是，useState是会实时的去刷新页面，但是也是因为这个原因导致页面多次刷新，十分的不方便。

如果是同类的useState，尽量要合并起来写。

const [countState,setCountState] = useState<number>(0);
const [countTipState,setCountTipState] = useState<string>('now count is 1, total is 2');

return (
    <div>{countState}</div>
    <div>{countTipState}</div>
)

//改成

const [countState,setCountState] = useState<number>(0);

return (
    <div>{countState}</div>
    <div>{`now count is ${countState}, total is ${countState * 2}`}</div>
)

3.不写依赖

useEffect、useCallback、useMemo、useImperativeHandle都是需要写依赖的，不然的话就算是useState、props改变了，有些状态也不会同步，要经常性的检查依赖，这样不会有状态不同步的问题。

其实可以用eslint之类的风格管理工具更方便一些，如果漏写了会有检查。

const [countState,setCountState] = useState(0);
useMemo((
    console.log(countState);
)=>{},[countState])

useEffect((
    console.log(countState);
)=>{},[countState])

4.乱用useRef

Ref确实方便，跨history而且可以随存随取。

但是不能用的太随意了，有些赋值来赋值去就会导致current地狱。

be like:

const myRef = useRef(null);
const nowRef = useRef({a:10});

useEffect(()=>{
    myRef = nowRef.current;
    if(myRef.current.current.a === 10){
        console.log(myRef.current.current.a)
    }
},[])

5.等等

类似于===不写成==、css复制来复制去、命名不规范之类的js初学者错误也很多。

我要下班了，回来再更新~