useContext还是多次调用useEffect

Question

我有一个自定义的useEffect挂钩，可以每分钟获取当前时间。

const useDateStatus = () => {
const [date, setDate] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => {
setDate(() => new Date());
}, 60000); 
return () => clearInterval(interval);
}, []);
return date;
};

我需要一个通用组件，当日期在给定的时间范围内时，该组件将呈现null，否则它将显示date。

const DateAlert = ({timeRanges, children}) => {
const date = useDateStatus();
if (!inRanges(date, timeRanges)) {
return null;
}
return (
<Alert>
<p>{date}</p>
{children}
</Alert>
);
};

我还需要另一个不需要日期对象的通用组件。

const Display = ({timeRanges, children}) => {
const date = useDateStatus();
if (!inRanges(date, timeRanges)) {
return null;
}
return children;
};

我应该创建一个包含date的上下文来传递date道具，然后使DateAlert使用该上下文吗？

const context = React.createContext(new Date());
const DateContext = ({children}) => {
const date = useDateStatus(new Date);
return (
<context.Provider value={date}>
{children}
</context.Provider>
);
}

我需要得到date的状态，从如何将道具传递给{this.props.children}，我认为使用上下文将date作为道具传递给孩子是很好的。

使用上下文获取date和直接调用useDateStatus()获取日期有什么区别？

或者有没有更好的方法来减少DateAlert和Display之间的冗余？

Answer 1

我建议制作一个组件，然后将该组件用于两个组件，例如：

const RenderIfInRange = ({timeRanges, children}) => {
const date = useDateStatus();
if (!inRanges(date, timeRanges)) {
return null;
}
return children;
};

这将成为您的Display组件。然后：

const DateAlert = ({children}) => (
<RenderIfInRange>
<Alert>
<p>{date}</p>
{children}
</Alert>
</RenderIfInRange>
);

我建议你看看特鲁菲特的巴赫。在我看来，它允许您将HOC模式用于钩子，并使代码看起来更整洁。