Как заставить ловушку useEffect вызывать предоставленный эффект, только если все элементы во входах меняются? - PullRequest
Новая
       10

Как заставить ловушку useEffect вызывать предоставленный эффект, только если все элементы во входах меняются?

0 голосов
/ 14 февраля 2019

Я пытаюсь преобразовать UNSAFE_componentWillReceiveProps в ловушку.Ниже приведена логика использования CWRP. 

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

Есть ли способ, которым я могу сказать hook для вызова эффекта только при изменении val1 и val2. 

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

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

`Я думаю, вы могли бы использовать пользовательский хук, как упомянуто в реагирующих документах : 

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 предоставит предварительно использованный хук из коробки, поскольку это довольно распространенный вариант использования.

0 голосов
/ 14 февраля 2019

Вы можете использовать хук 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>
...