组长指出了我在使用react时常犯的错误

时间：2023-03-28 16:06:58 HTML

背景在年底，我更换了项目组。新项目组用的是react。从vue到react，我只用了一天时间。看了官方简单的文章，感觉这个东西很简单。与vue相比，就是这么简单。对于api，完全没有学习成本。嗯，很快就进入了react的项目开发，很自豪。根据我多年的经验，这一波肯定会得到领导的赏识。很快，我会完成我的要求是提交代码。组长可能确实比较自由。他还审查了我的代码，指出了一系列问题，并告诉我学习React最困难的部分不是知道如何使用它，而是知道如何编写好的、干净的React代码。我主要提到了六个错误。我相信在座的各位可能都需要坐下。在不需要使用state的时候使用state涉及到项目中的代码逻辑。下面我们把一些内容以demo的形式展示出来。很多场景都需要提交表单。对于一些表单的提交，大部分人的代码可能是这样实现的。导出默认函数App(){const[name,setName]=useState("");常量提交=(e)=>{e.preventDefault();控制台日志（名称）；};constchange=(e)=>{setName(e.target.value);};返回(名称：

);}页面有个name输入框，通过state绑定数据，提交时从state中取出数据，真像到Vue的双向绑定，通过state方法表单实现了，表面上没有问题，页面也呈现出来了，提交数据也拉出来了。但其实我们在其他地方是不会用到这个name状态的，除了提交的时候，有人会说value也是用的，但其实你不需要value字段。这个数据只在提交的时候用到，所以这里不需要用state。防止组件刷新，只需要通过ref改变即可。导出默认函数App(){constnameRef=useRef(null);常量提交=(e)=>{e.preventDefault();console.log(nameRef.current.value);};返回(Submit

);}和之前一样，我们在点击提交按钮的时候拿到的是最新的数据，页面并没有多次刷新useState回调函数，所以当使用useState？这种呈现在页面上的内容是需要使用的，比如一个counterexportdefaultfunctionApp(){const[count,setCount]=useState(0);constsubmit=(val)=>{setCount(count+val);};返回(submit(-1)}>-1</button>{count}submit(1)}>+1

);}表面上没有问题,click加减也是很正常的，但是如果你熟悉useState，你也会给setCount传递一个函数形式。两个表达式看起来完全一样，没有区别constsubmit=(val)=>{setCount((current)=>current+val);};那么具体区别在哪里呢？在不使用回调函数的时候，如果我们不断更新状态，像下面这样的setCount(count+val)setCount(count+val)实际上只会增加一页，因为在这个更新过程中，count的值是固定的，这就是为什么我们常说setState是异步的（当你改变状态时，它不会立即更新，而是要等到下一次渲染才会更新），而react会批处理状态，但是如果是这样的形式函数constsubmit=(val)=>{setCount((current)=>current+val);setCount((current)=>current+val);};可以得到想要的结果，所以如果想使用之前的状态修改状态值，最好使用函数形式异步更新状态。useEffect的使用就是通过前面的计数。我们知道，当我们立即获取计数值时，我们获取的不是最新值。constsubmit=(val)=>{setCount((current)=>current+val);控制台日志（计数）；};这时候有人想到了useEffect，于是得到了一个新的值useEffect(()=>{console.log(count)},[count])那么对于这一点，很多同学把useEffect当成了vue中的手表，而实现以下逻辑导出默认函数App(){const[user,setUser]=useState("");const[名称,设置名称]=useState("");const[用户名,setUserName]=useState("");useEffect(()=>{setUserName(user+name);},[user,name]);返回(setUser(e.target.value)}/>setName(e.target.value)}/>{userName}