1.关于父子组件传值
在父组件定义好类型,给传递的值加上类型,子组件引入父组件定义的这个类型,直接用就好,不用再到子组件定义额外的类型了
2. Ant-design Table coloumn 属性的render 函数定义了两个可选值
render?: (value: string, record?: any) => ReactElement
render: (_, record) => {
return renderTodo(record);
}
3. 组件函数使用async await 调用外部函数请求数据
在组件函数内取得值,就添加到useState 里或者将这个值使用dispach传给redux。
组件使用 useSelecter取值。
*** 犯的错误点,组件定义了这个async函数,在useEffect调用,希望在
useEffect获得它的结果。** 结果就是pendding, 因为 async的函数是
promise对象,它的结果又怎么不会是pedding或者其他值呢?
*** 所以, 在这个async函数内获得值即赋值 或者转发 (redux);
4. 后端需要的参数传错,
后端需要的参数传错了的话,是无法操作数据库数据的
相应的前端 效果也就不对。就比如这次后端需要的分页参数的当前页参数传错了,要
的是pageNo 传的是curPage, 返回的永远都是第一页的数据,修改过后就好了。
5.也可以用useCallback ,但只能是给usezCallback传参的方式
6. redux useSelect触发dispatch导致的整个组件重渲
redux useSelect触发dispatch导致的整个组件重渲,但并不是整个组件的重新加载。
组件重渲,整个组件会得到最新的 props和 state, 相应的,组件重渲后,组件的所有节点和函数都会得到最新的值,
但组件的函数并未重新触发(即使这个函数已经获得了最新的渲染值),只是节点上的,视觉效果(因为重渲导致值的改变) 改变了。
这就是为什么,在子组件调用父组件的函数 (此函数包含reudx useDispatch 的 dispatch触发器),仅仅会更新触发器触发后的
useSelsect所取出的值, 并不会调用父组件的useEffect函数(父组件在初始化时也调用了这个函数),导致子组件调用了父组件的函数,
effect再次在父组件这个函数导致数据混乱的问题。
**重渲,是 state 和 props 重新赋值的问题!
8. 使用 antd 的渲染父级,再使用 table 的 ellipsis: true 渲染就出问题
使用 antd 的渲染父级,再使用 table colmuns 的 ellipsis: true 渲染就出问题了。
下拉框会罩在父级。记住着两个不要一起使用。
使用 getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement 绑定至父级 (渲染父级)
9. 列表循环时,key: ‘ALL_TRANSLATE’ key无法识别中间像横线这样的
列表循环时,key: 'ALL_TRANSLATE' key无法识别中间像横线这样的,
尽量取中间不会分开的。
10.项目中不要多次接收常量,增加理解成本。
就像你在constants.js 定义了常量,然后组件内部再用个变量接收这个常量再去使用,这是不可取的,
会增加理解成本和可维护性。
11. 为什么给后端的入参为Null 时,这个字段就被忽略了?
为什么给后端的入参为Null 时,这个字段就被忽略了?
12. Type 无法指定函数参数
Type 无法指定函数参数, 必须使用 interface。
13. 常量对象、对象键、键值全部大写
export const LIST = {
NAME: 'NIU_HENG',
AGE: 'AGE',
SEX: 'SEX'
};