React管理系统开发踩坑
创始人
2024-05-11 15:35:28

1 antd Table组件改变dataSource数据源但并没有重新渲染

Table只有在rowKey发生变化时才会改变，因此rowKey需要改变

item => item.name+ Date.now()}/>

2 使用useEffect陷入无限循环
由于在useEffect中使用setState更新了数据，使页面重新经历componentDidUpdate生命周期，因此会再次调用useEffect，导致陷入循环中
解决办法：让useEffect绑定依赖项
useEffect(()=>{setData(data)
},[dialogData])

3 将antd表格导出为excel
使用js-export-excel,在使用import导入时，需要先在.d.ts文件中进行声明
//declare module 'js-export-excel'
let options = {}
options.fileName = ''
options.datas = [sheet
]
4 使用setState改变对象属性和数组属性
setUser({...user,name: 'xie'
})setArr([...arr,4])

5 useRef和useState的区别
可以直接在函数中获取到改变的ref值，useRef改变值不会引起页面的重新渲染，而useState会
const ref = useRef(0)const handleClick = ()=>{ref.current = ref.current + 1
}
6 对自定义组件使用ref
interface Props{children: ReactNode
}type Ref = HTMLInputElementconst MyInput= forwardRef((props,ref)=>{return ...props} ref={ref}/>
})

7 useReducer
useState中存在的问题依然存在

interface InitialState{name:string
}interface ActionType {type: 'change'| 'increment' | 'reset'payload: string | number
}const initialState = { name:'111'}
const reducer = (state:InitialState,action:ActionType):StateType=>{switch (action.type){case 'change':return [...state,name:'xie']breakdefault:break}return initialState
}const [state,dispatch]=useReducer(reducer,initialState)const handleChange = ()=>{dispatch({type: 'change'})
}
8 useContext
当多个组件同时使用同一个context，又不希望都变化
const NumContext = createContext(undefined)const Com = ()=>{const num = useContext(NumContext)return(
{num}
	)
}const Counter = ()=>{const num = useContext(NumContext)return 
num}>

}const Hook = ()=>{return(num}>)
}

9 useMemo
适用于有大量数据渲染时，依赖缓存
const visible = useMemo(()=>filterNodes(todes,tab),[todes,tab])


                
               
            

                

                    上一篇：GitHub进阶使用指南

                

                

                    下一篇：【阶段三】Python机器学习31篇：机器学习项目实战：基于皮尔逊相关系数搭建电影智能推荐系统                

            

                
                
相关内容

                
            

                 

            

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    

                    
                

                
            

            
            
            


                                
                

                    
                    
                    
                    
                    

                        新华视点｜文旅新体验让传统“潮...
                        ■当敦煌壁画遇上花灯敦煌灯会以“千年华彩 盛世敦煌”为主题，主要分为三个区域：敦煌夜市商业街、西域路...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        玉米淀粉商品报价动态（2026...
                        生意社01月10日讯        交易商品牌/产地交货地最新报价玉米淀粉　食品级含量99河南汇亿海...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        欧空局向“可回收”低头，计划魔...
                        　　炒股就看金麒麟分析师研报，权威，专业，及时，全面，助您挖掘潜力主题机会！		（来源：IT之家）I...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        “马”上尝鲜，进一步激发新春消...
                        （来源：劳动报）转自：劳动报依托供应链升级与“金牌挑手”严选体系，联华于2026新年之际，正式推出“...
                    

                    
                

                                
                

                    
                    
                    
                    
                    

                        华硕 CES 2026亮点速递...
                        在CES 2026这场科技盛会上，华硕携众多新品亮相。除了主板等核心PC硬件，迷你主机产品线也迎来重...