如何获取上一轮的 props 或 state?
方法1: 利用ref(主要原理是利用ref的稳定性,可以当个全局变量去使用(只会第一次初始化的时候生成,后面不会改变),加上useEffect的功能(在页面渲染完成后成执行,类似setTimeout的功能))
摘自官网https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables
目前,你可以 通过 ref 来手动实现:
function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
});
const prevCount = prevCountRef.current;
return <h1>Now: {count}, before: {prevCount}</h1>;
}
这或许有一点错综复杂,但你可以把它抽取成一个自定义 Hook:
function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return <h1>Now: {count}, before: {prevCount}</h1>;
}
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
注意看这是如何作用于 props, state,或任何其他计算出来的值的。
function Counter() {
const [count, setCount] = useState(0);
const calculation = count + 100;
const prevCalculation = usePrevious(calculation);
// ...
考虑到这是一个相对常见的使用场景,很可能在未来 React 会自带一个 usePrevious
Hook。
方法2:实现一个hooks版本的 getDerivedStateFromProps(原理也用两个变量,一个记录当前值,一个记录上一次值)
const [dataSource, setDataSource] = useState(data);
const [prevRow, setPrevRow] = useState(null) // getDerivedStateFromProps 实现
getDerivedStateFromProps(data);
function getDerivedStateFromProps(row) {
// 核心是创建一个 prevRow state 与父组件传进来的 row 进行比较
if (JSON.stringify(row) !== JSON.stringify(prevRow)) {
setDataSource(row);
setPrevRow(row)
}
}
方法3: 可以直接改变组件的key值,因为key值改变的时候整个react组件就会重新渲染,从而实现props和state的重新赋值
<Table
border
stripe
rowKey="id"
columns={columns}
key={this.state.index}
data={dd}
rowSelection={rowSelection}
scroll={{ x: 2600, y: 2000 }}
/>