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