Question

我从一个 connected 容器中获得了一个load函数prop，并且我正在考虑将两个选项与useEffect一起使用，但是我没有知道哪个可能被认为是最佳实践，这里是第一个：

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

这是我使用useRef read about的第二个：

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

要调用一次，在刚安装组件时，可以使用具有空依赖项的hook useEffect：

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

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

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

Answer 4

只需使用：

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

这只是一个回调。如果要调用一次，则不应传递该负载。来自react docs https://reactjs.org/docs/hooks-effect.html：

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

当然，您可以通过redux使用分派，但是我想在这种简单的情况下，分派事件有点脏。因此，我认为useEffect挂钩的使用更干净。

功能道具的使用效果最佳实践

4 个答案: