Effect Events 真的有必要吗?

huangapple go评论64阅读模式
英文:

Are Effect Events really necessary?

问题

在以下官方示例中,我使用普通的JS函数而不是Effect Events,这样更加简洁吗?

Effect Events真的是必要的吗?

这是官方的Event Effect示例链接:
https://codesandbox.io/s/bd0s8d?file=/App.js&utm_medium=sandpack
这是我的修改:
https://codesandbox.io/s/elegant-chaum-cwnyr9

英文:

In the following official example, I use plain JS functions instead of Effect Events, isn't this more concise?

Are Effect Events really necessary?

// official example

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected!', theme);
  });

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      onConnected();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h1>Welcome to the {roomId} room!</h1>
}

// My change 
function ChatRoom({ roomId, theme }) {
  function play() {
    showNotification('Connected!', theme);
  }
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.on('connected', () => {
      play();
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);

  return <h1>Welcome to the {roomId} room!</h1>
}

This is the official example of Event Effect:
https://codesandbox.io/s/bd0s8d?file=/App.js&utm_medium=sandpack
This is my change:
https://codesandbox.io/s/elegant-chaum-cwnyr9

答案1

得分: 1

Your change is incorrect, because your function play is missing in the dependency array of the useEffect, and every reactive value read by an Effect must be declared as its dependency.

To make it correct, you would need to add play in the dependencies of the useEffect, and wrap it in a useCallback with theme as dependency. But then it's exactly the same as if you didn't extract showNotification and put theme in the dependencies of the useEffect directly.

This is the purpose of useEffectEvent: to extract non-reactive logic out of effects, without the need to put it in the dependencies, as explained in the docs.

Please note that it is currently an experimental feature.

英文:

Your change is incorrect, because your function play is missing in the dependency array of the useEffect, and every reactive value read by an Effect must be declared as its dependency.

To make it correct, you would need to add play in the dependencies of the useEffect, and wrap it in a useCallback with theme as dependency. But then it's exactly the same as if you didn't extract showNotification and put theme in the dependencies of the useEffect directly.

This is the purpose of useEffectEvent: to extract non-reactive logic out of effects, without the need to put it in the dependencies, as explained in the docs.

Please note that it is currently an experimental feature.

huangapple
  • 本文由 发表于 2023年7月10日 23:45:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76655347.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定