如何防止每次导入自定义钩子时调用customHook中的useEffect？

Question

我正在使用react js和socket编写聊天应用程序。io库。

我订阅事件形成服务器并发出一些事件的所有逻辑都写在自定义钩子的使用效果中。

然后我从这个自定义钩子返回我需要的所有数据，并在我需要的组件中重用它。但是，我意识到，每次我将此自定义钩子导入到外部组件时，都会调用在use效应中编写的逻辑。

如果我将所有逻辑放在useEffect之外，调用它的次数甚至比导入自定义钩子的次数还要多。

如果有可能，我该如何预防呢？

如果不可能，请您提出什么解决方案？我不想在这个应用程序中使用redux，我想把所有的东西都保存在这个定制的钩子组件中，只需要在需要的地方重用其中的数据。

我不能分享工作示例，因为没有服务器部分它就无法工作，所以这里有一个简单的codesandbox示例。您可以在控制台中看到它被渲染了两次。

https://codesandbox.io/s/custom-hook-bfc5j?file=/src/useChat.js

Answer 1

如果您想一次性设置一些副作用，但同时在多个位置使用生成的数据，一种方法是使用上下文功能。

// ws/context.jsx, or similar

const WsContext = React.createContext(defaultValue);

export const WsProvider = props => {
  const [value, setValue] = useState(someInitialValue);
  useEffect(() => {
    // do expensive things, call setValue with new results
  });
  return (
    <WsContext.Provider value={value}>
      {props.children}
    </WsContext.Provider>
  );
};

export const useCustomHook = () => {
  const value = useContext(WsContext);

  // perhaps do some other things specific to this hook usage

  return value;
};

您可以期望钩子在

如果在提供者组件的非子代中使用钩子，则返回的值将是我们初始化上下文实例时使用的defaultValue。

Answer 2

它呈现两次，因为您在应用程序中调用了两次useChat（）（一次在app.js中，另一次在Text.js中），您可以做的是在应用程序中创建useChat组件的引用。js和pass作为文本的道具。比如：

一个pp.js

import React from "react";
import useChat from "./useChat";
import Text from "./Text";
import "./styles.css";

export default function App() {
  const myUseChat = useChat();
  const { printMessage } = myUseChat;

  return (
    <div className="App">
      <button onClick={printMessage}>Print</button>
      <Text myUseChat={myUseChat} />
    </div>
  );
}

文本js

import React from "react";
import useChat from "./useChat";
import "./styles.css";

export default function Text(props) {
  const { text } = props.myUseChat;

  return <div className="App">{text}</div>;
}