只有当输入中的所有元素都改变时，如何使useEffect挂钩调用提供的效果？

Question

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

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

有什么方法我只能在val1和val2改变时告诉挂钩调用效果。

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

Answer 1

`我想你可以使用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可能会提供一个usePrevious Hook开箱即用，因为它是一个相对常见的用例。

Answer 2

您可以使用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>