回顾过去1年多的react hooks开发，分享一些新手常踩的坑：
- 在React中将常量绑定到页面元素，需要注意：
- 静态内容：因为常量的值是固定的并且不可变的，它们只是用于提供静态的数据或配置信息，无法动态改变。
- 性能优化：在某些情况下，若常量作为属性被频繁地传递给子组件，可能会导致不必要的渲染。考虑使用
React.memo或使用useMemo钩子包装常量，只有在常量值发生变化时才重新渲染组件。
- 多个
useEffect根据一层一层的依赖值触发调用，要注意判断不该调用的情况下请return-数据为undefined、null时在页面元素上不显示【可用-代替】，数组必须保证不为空再进行循环显示,否则页面会爆红
<Button type="link">
{estimateCount == null || undefined || '' ? '-' : estimateCount}
</Button>
{
<div>
{data?.length > 0 ? <DemoPie /> : <div>暂无数据</div>}
</div>
}
注意：
- data?.length > 0 如果改成data?.length&&……在空数组情况下会显示：0&&
- data?.length如果不加?，当data不为数组情况下，length为undefined页面会报错会爆红
- 页面内子组件绑定的变量，如果希望变量每次修改后子组件重新渲染，子组件使用
React.memo的同时，接收的props变量若为{}或者[]格式每次请setState(newArrar/newObject)进行替换，否则只修改数组项或者对象属性是无法改变变量本身从而无法触发渲染 - useEffect传
[]作为依赖项，是只在组件初始化的渲染结束后调用一次，return ()在组件销毁的时候调用【useEffect没有第二个参数时,组件的初始化和更新都会执行】
useEffect(() => {
isMount.current = true;
return () => {
isMount.current = false;
}
}, [])
-
setState每次操作后都会导致页面重新渲染，需要减少setState，可配合React.memo来减少
-
setState后是异步，这点非常坑
解决方法：文章-useState异步解决方法 -
属于js的问题：==和===的情况要注意，==null是数据为null或者undefined都行，而===null是完全为null
