每天都在写业务代码中度过,但是呢,经常在写业务代码的时候,会感觉自己写的某些代码有点别扭,但是又不知道是哪里别扭,今天这篇文章我整理了一些在项目中使用的一些小的技巧点。
在使用React Hooks
之前,我们一般复用的都是组件,对组件内部的状态是没办法复用的,而React Hooks
的推出很好的解决了状态逻辑的复用,而在我们日常开发中能做到哪些状态逻辑的复用呢?下面我罗列了几个当前我在项目中用到的通用状态复用。
useRequest
为什么要封装这个hook
呢?在数据加载的时候,有这么几点是可以提取成共用逻辑的
loading
状态复用const useRequest = () => {
const [loading, setLoading] = useState(false);
const [error, setError] = useState();
const run = useCallback(async (...fns) => {
setLoading(true);
try {
await Promise.all(
fns.map((fn) => {
if (typeof fn === 'function') {
return fn();
}
return fn;
})
);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
}, []);
return { loading, error, run };
};
function App() {
const { loading, error, run } = useRequest();
useEffect(() => {
run(
new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 2000);
})
);
}, []);
return (
<div className="App">
<Spin spinning={loading}>
<Table columns={columns} dataSource={data}></Table>
</Spin>
</div>
);
}
我们用表格的时候,一般都会用到分页,通过将分页封装成hook
,一是可以介绍前端代码量,二是统一了前后端分页的参数,也是对后端接口的一个约束。
const usePagination = (
initPage = {
total: 0,
current: 1,
pageSize: 10,
}
) => {
const [pagination, setPagination] = useState(initPage);
// 用于接口查询数据时的请求参数
const queryPagination = useMemo(
() => ({ limit: pagination.pageSize, offset: pagination.current - 1 }),
[pagination.current, pagination.pageSize]
);
const tablePagination = useMemo(() => {
return {
...pagination,
onChange: (page, pageSize) => {
setPagination({
...pagination,
current: page,
pageSize,
});
},
};
}, [pagination]);
const setTotal = useCallback((total) => {
setPagination((prev) => ({
...prev,
total,
}));
}, []);
const setCurrent = useCallback((current) => {
setPagination((prev) => ({
...prev,
current,
}));
}, []);
return {
// 用于antd 表格使用
pagination: tablePagination,
// 用于接口查询数据使用
queryPagination,
setTotal,
setCurrent,
};
};
除了上面示例的两个hook
,其实自定义hook
可以无处不在,只要有公共的逻辑可以被复用,都可以被定义为独立的hook
,然后在多个页面或组件中使用,我们在使用redux
,react-router
的时候,也会用到它们提供的hook
。
useState
传入函数我们在使用useState
的setState
的时候,大部分时候都会给setState
传入一个值,但实际上setState
不但可以传入普通的数据,而且还可以传入一个函数。下面极端代码分别描述了几个传入函数的例子。
如下代码所示,也有有两个按钮,一个按钮会在点击后延迟三秒然后给count + 1
, 第二个按钮会在点击的时候,直接给count + 1
,那么假如我先点击延迟的按钮,然后多次点击不延迟的按钮,三秒钟之后,count
的值是多少?
import { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setTimeout(() => {
setCount(count + 1);
}, 3000);
}
function handleClickSync() {
setCount(count + 1);
}
return (
<div className="App">
<div>count:{count}</div>
<button onClick={handleClick}>延迟加一</button>
<button onClick={handleClickSync}>加一</button>
</div>
);
}
export default App;
我们知道,React
的函数式组件会在自己内部的状态或外部传入的props
发生变化时,做重新渲染的动作。实际上这个重新渲染也就是重新执行这个函数式组件。
当我们点击延迟按钮的时候,因为count
的值需要三秒后才会改变,这时候并不会重新渲染。然后再点击直接加一按钮,count
值由1
变成了2
, 需要重新渲染。这里需要注意的是,虽然组件重新渲染了,但是setTimeout
是在上一次渲染中被调用的,这也意味着setTimeout
里面的count
值是组件第一次渲染的值。
所以即使第二个按钮加一多次,三秒之后,setTimeout
回调执行的时候因为引用的count
的值还是初始化的0
, 所以三秒后count + 1
的值就是1
这时候就需要使用到setState
传入函数的方式了,如下代码:
import { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setTimeout(() => {
setCount((prevCount) => prevCount + 1);
}, 3000);
}
function handleClickSync() {
setCount(count + 1);
}
return (
<div className="App">
<div>count:{count}</div>
<button onClick={handleClick}>延迟加一</button>
<button onClick={handleClickSync}>加一</button>
</div>
);
}
export default App;
从上面代码可以看到,setCount(count + 1)
被改为了setCount((prevCount) => prevCount + 1)
。我们给setCount
传入一个函数,setCount
会调用这个函数,并且将前一个状态值作为参数传入到函数中,这时候我们就可以在setTimeout
里面拿到正确的值了。
useState
初始化的时候传入函数看下面这个例子,我们有一个getColumns
函数,会返回一个表格的所以列,同时有一个count
状态,每一秒加一一次。
function App() {
const columns = getColumns();
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount((prevCount) => prevCount + 1);
}, 1000);
}, []);
useEffect(() => {
console.log('columns发生了变化');
}, [columns]);
return (
<div className="App">
<div>count: {count}</div>
<Table columns={columns}></Table>
</div>
);
}
上面的代码执行之后,会发现每次count
发生变化的时候,都会打印出columns发生了变化
,而columns
发生变化便意味着表格的属性发生变化,表格会重新渲染,这时候如果表格数据量不大,没有复杂处理逻辑还好,但如果表格有性能问题,就会导致整个页面的体验变得很差?其实这时候解决方案有很多,我们看一下如何用useState
来解决呢?
// 将columns改为如下代码
const [columns] = useState(() => getColumns());
这时候columns
的值在初始化之后就不会再发生变化了。有人提出我也可以这样写 useState(getColumns())
, 实际这样写虽然也可以,但是假如getColumns
函数自身存在复杂的计算,那么实际上虽然useState
自身只会初始化一次,但是getColumn
还是会在每次组件重新渲染的时候被执行。
上面的代码也可以简化为
const [columns] = useState(getColumns);
hook
比较算法的原理const useColumns = (options) => {
const { isEdit, isDelete } = options;
return useMemo(() => {
return [
{
title: '标题',
dataIndex: 'title',
key: 'title',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
render() {
return (
<>
{isEdit && <Button>编辑</Button>}
{isDelete && <Button>删除</Button>}
</>
);
},
},
];
}, [options]);
};
function App() {
const columns = useColumns({ isEdit: true, isDelete: false });
const [count, setCount] = useState(1);
useEffect(() => {
console.log('columns变了');
}, [columns]);
return (
<div className="App">
<div>
<Button onClick={() => setCount(count + 1)}>修改count:{count}</Button>
</div>
<Table columns={columns} dataSource={[]}></Table>
</div>
);
}
如上面的代码,当我们点击按钮修改count
的时候,我们期待只有count
的值会发生变化,但是实际上columns
的值也发生了变化。想了解为什么columns
会发生变化,我们先了解一下react
比较算法的原理。
react
比较算法底层是使用的Object.is
来比较传入的state
的.
语法: Object.is(value1, value2);
如下代码是Object.is
比较不同数据类型的数据时的返回值:
Object.is('foo', 'foo'); // trueObject.is(window, window); // trueObject.is('foo', 'bar'); // falseObject.is([], []); // falsevar foo = { a: 1 };var bar = { a: 1 };Object.is(foo, foo); // trueObject.is(foo, bar); // falseObject.is(null, null); // true// 特例Object.is(0, -0); // falseObject.is(0, +0); // trueObject.is(-0, -0); // trueObject.is(NaN, 0/0); // true
通过上面的代码可以看到,Object.is
对于对象的比较是比较引用地址的,而不是比较值的,所以Object.is([], []), Object.is({},{})
的结果都是false
。而对于基础类型来说,大家需要注意的是最末尾的四个特列,这是与===
所不同的。
再回到上面代码的例子中,useColumns
将传入的options
作为useMemo
的第二个参数,而options
是一个对象。当组件的count
状态发生变化的时候,会重新执行整个函数组件,这时候useColumns
会被调用然后传入{ isEdit: true, isDelete: false }
,这是一个新创建的对象,与上一次渲染所创建的options
的内容虽然一致,但是Object.is
比较结果依然是false
,所以columns
的结果会被重新创建返回。
我们在项目中使用antd
作为组件库,虽然antd
可以满足大部分的开发需要,但是有些地方通过对antd
进行二次封装,不仅可以减少开发代码量,而且对于页面的交互起到了标准化作用。
看一下下面这个场景, 在我们开发一个数据表格的时候,一般会用到哪些功能呢?
还有其他等等一系列的功能,这些功能在系统中会大量使用,而且其实现方式基本是一致的,这时候如果能把这些功能集成到一起封装成一个标准的组件,那么既能减少代码量,而且也会让页面展现上更加统一。
以封装表格操作列为例,一般用操作列我们会像下面这样封装
const columns = [{ title: '操作', dataIndex: 'action', key: 'action', width: '10%', align: 'center', render: (_, row) => { return ( <> <Button type="link" onClick={() => handleEdit(row)}> 编辑 </Button> <Popconfirm title="确认要删除?" onConfirm={() => handleDelete(row)}> <Button type="link">删除</Button> </Popconfirm> </> ); } }]
我们期望的是操作列也可以像表格的columns
一样通过配置来生成,而不是写jsx
。看一下如何封装呢?
// 定义操作按钮export interface IAction extends Omit<ButtonProps, 'onClick'> { // 自定义按钮渲染 render?: (row: any, index: number) => React.ReactNode; onClick?: (row: any, index: number) => void; // 是否有确认提示 confirm?: boolean; // 提示文字 confirmText?: boolean; // 按钮显示文字 text: string;}// 定义表格列export interface IColumn<T = any> extends ColumnType<T> { actions?: IAction[];}// 然后我们可以定义一个hooks,专门用来修改表格的columns,添加操作列const useActionButtons = ( columns: IColumn[], actions: IAction[] | undefined): IColumn[] => { return useMemo(() => { if (!actions || actions.length === 0) { return columns; } return [ ...columns, { align: 'center', title: '操作', key: '__action', dataIndex: '__action', width: Math.max(120, actions.length * 85), render(value: any, row: any, index: number) { return actions.map((item) => { if (item.render) { return item.render(row, index); } if(item.confirm) { return <Popconfirm title={item.confirmText || '确认要删除?'} onConfirm={() => item.onClick?.(row, index)}> <Button type="link">{item.text}</Button> </Popconfirm> } return ( <Button {...item} type="link" key={item.text} onClick={() => item.onClick?.(row, index)} > {item.text} </Button> ); }); } } ]; }, [columns, actions, actionFixed]);};// 最后我们对表格再做一个封装const CustomTable: React.FC<ITableProps> = ({ actions, columns, ...props}) => { const actionColumns = useActionColumns(columns,actions) // 渲染表格}
通过上面的封装,我们再使用表格的时候,就可以这样去写
const actions: IAction[] = [ { text: '编辑', onClick: handleModifyRecord, }, ];return <CustomTable actions={actions} columns={columns}></CustomTable>