hooks非受控组件更新传入的 props

如何获取上一轮的 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。

参见 derived state 推荐模式.

 

方法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 }}
        />