如何让 useEffect hook 仅在 inputs 中的所有元素发生变化时调用提供的效果？

Question

我正在尝试将 UNSAFE_componentWillReceiveProps 转换为钩子。下面是使用CWRP的逻辑。

UNSAFE_componentWillReceiveProps(nextProps){
  if (this.props.val1 !== nextProps.val1 && this.props.val2 !== nextProps.val2) {
    // do something
  }
}

有什么方法可以让 hook 仅在 val1 和 val2 发生变化时调用 effect。

useEffect(() => {
  // do something only when both inputs change 
}, [val1, val2])

Answer 1

你可以使用 useRef 钩子来存储上次效果为运行的道具并与之进行比较。

例子

const { useEffect, useRef } = React;

function MyComponent({ val1, val2 }) {
  const lastProps = useRef({ val1, val2 });
  useEffect(
    () => {
      if (lastProps.current.val1 !== val1 && lastProps.current.val2 !== val2) {
        console.log("Both changed!");
      }

      lastProps.current = { val1, val2 };
    },
    [val1, val2]
  );

  return <div> {val1} {val2} </div>;
}

class App extends React.Component {
  state = { val1: 1, val2: 1 };

  componentDidMount() {
    setTimeout(() => this.setState({ val1: 2 }), 1000);
    setTimeout(() => this.setState({ val2: 2 }), 2000);
    setTimeout(() => this.setState({ val1: 3, val2: 3 }), 3000);
  }

  render() {
    const { val1, val2 } = this.state;
    return <MyComponent val1={val1} val2={val2} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js" ></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" ></script>

<div id="root"></div>

Answer 2

`我想您可以使用 react documents 中提到的自定义挂钩：

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function MyComponent({val1, val2}) {
    let val1Prev = usePrevious(val1);
    let val2Prev = usePrevious(val2);
    useEffect(() => {
        if(val1Prev !== val1 || val2Prev !== val2) {
            // do whatever you want
        }
    })
}

另外，注意react文档中的这句话：

It’s possible that in the future React will provide a usePrevious Hook out of the box since it’s a relatively common use case.

如何让 useEffect hook 仅在 inputs 中的所有元素发生变化时调用提供的效果？

How to make useEffect hook call the provided effect only if all the elements in inputs change?

reactjs

react-hooks