函数道具使用效果最佳实践

Question

我正在从连接的容器中propload函数，我正在考虑与useEffect一起使用的两个选项，但我不知道哪一个可能被认为是最佳实践，这里是第一个：

function MyComponent({ load }) {
useEffect(() => {
load();
}, [load]);
}

这是我读到的关于使用useRef的第二个：

function MyComponent({ load }) {
const loadRef = useRef({ loadData: load});
useEffect(() => {
const { loadData } = loadRef.current;
loadData(); 
}, []);
}

我应该使用哪一个，为什么？

Answer 1

使用钩子，你可能想要的是使用 useDispatch((

并在useEffect中调用useDispatch(actionCreator(。

Answer 2

你需要调用一次 Redux 函数吗？

只需使用

useEffect(() => {
load();
}, []);

您甚至可能不需要在括号中添加load，如果加载没有停止，这意味着您的组件在停止后不会重新渲染，并且您需要放置告诉生命周期方法重新渲染的对象，因为加载已完成，在大多数情况下，它是本地状态下的isLoading布尔值。

Answer 3

要调用一次，当组件刚刚挂载时，你可以将钩子 useEffect 与空依赖项一起使用：

useEffect(() => {
load()
}, [])

更多信息 https://reactjs.org/docs/hooks-effect.html

加载函数可以从 props 中获取，如果您将通过连接函数从 redux 映射它。 更多信息 https://react-redux.js.org/api/connect

Answer 4

只需使用：

useEffect(() => {
load();
}
[]);

这只是一个回调。如果要调用一次负载，则不应传递负载。 从反应文档中 https://reactjs.org/docs/hooks-effect.html：

在上面的例子中，我们传递 [count] 作为第二个参数。这是什么意思？如果计数是 5，然后我们的组件重新渲染时 count 仍然等于 5，React 将比较上一个渲染的 [5] 和下一个渲染的 [5]。因为数组中的所有项目都是相同的(5 === 5(，所以 React 会跳过这个效果。这就是我们的优化。

当然，您可以通过 redux 使用调度，但是我想在这种简单的情况下调度事件有点脏。所以在我看来，使用useEffect钩子更干净。