如何操作上下文 - 将函数附加到上下文或将调度包装在钩子中？

问题描述 投票：9回答：2

我想知道操作和公开新的React Context的推荐最佳实践是什么。

操作上下文状态的最简单方法似乎是将函数附加到上下文中，该函数调度（usereducer）或setstate（useState）以在调用后更改其内部值。

export const TodosProvider: React.FC<any> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, null, init);

  return (
    <Context.Provider
      value={{
        todos: state.todos,
        fetchTodos: async id => {
          const todos = await getTodos(id);
          console.log(id);
          dispatch({ type: "SET_TODOS", payload: todos });
        }
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const Todos = id => {
  const { todos, fetchTodos } = useContext(Context);
  useEffect(() => {
    if (fetchTodos) fetchTodos(id);
  }, [fetchTodos]);
  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre>
    </div>
  );
};

然而，我被告知暴露并直接使用react上下文对象可能不是一个好主意，并被告知将其包装在钩子内。

export const TodosProvider: React.FC<any> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, null, init);

  return (
    <Context.Provider
      value={{
        dispatch,
        state
      }}
    >
      {children}
    </Context.Provider>
  );
};

const useTodos = () => {
  const { state, dispatch } = useContext(Context);
  const [actionCreators, setActionCreators] = useState(null);

  useEffect(() => {
    setActionCreators({
      fetchTodos: async id => {
        const todos = await getTodos(id);
        console.log(id);
        dispatch({ type: "SET_TODOS", payload: todos });
      }
    });
  }, []);

  return {
    ...state,
    ...actionCreators
  };
};

export const Todos = ({ id }) => {
  const { todos, fetchTodos } = useTodos();
  useEffect(() => {
    if (fetchTodos && id) fetchTodos(id);
  }, [fetchTodos]);

  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre>
    </div>
  );
};

我在这里为这两个变体制作了代码示例：https://codesandbox.io/s/mzxrjz0v78?fontsize=14

那么现在我有点困惑的是，正确的两种方式中哪一种是正确的方法呢？

reactjs react-hooks react-context
2个回答
6
投票

在组件中直接使用useContext绝对没有问题。然而，它强制必须使用上下文值的组件知道要使用的上下文。

如果您在应用程序中有多个组件要使用TodoProvider上下文，或者您的应用程序中有多个上下文，则可以使用自定义钩子将其简化一点

使用上下文时还必须考虑的另一件事是你不应该在每个渲染上创建一个新对象，否则使用context的所有组件都将重新渲染，即使没有任何改变。要做到这一点，你可以使用useMemo钩

const Context = React.createContext<{ todos: any; fetchTodos: any }>(undefined);

export const TodosProvider: React.FC<any> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, null, init);
  const context = useMemo(() => {
    return {
      todos: state.todos,
      fetchTodos: async id => {
        const todos = await getTodos(id);
        console.log(id);
        dispatch({ type: "SET_TODOS", payload: todos });
      }
    };
  }, [state.todos, getTodos]);
  return <Context.Provider value={context}>{children}</Context.Provider>;
};

const getTodos = async id => {
  console.log(id);
  const response = await fetch(
    "https://jsonplaceholder.typicode.com/todos/" + id
  );
  return await response.json();
};
export const useTodos = () => {
  const todoContext = useContext(Context);
  return todoContext;
};
export const Todos = ({ id }) => {
  const { todos, fetchTodos } = useTodos();
  useEffect(() => {
    if (fetchTodos) fetchTodos(id);
  }, [id]);
  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre>
    </div>
  );
};

Working demo

编辑：

既然getTodos只是一个无法改变的函数，那么在useMemo中使用它作为更新参数是否有意义？

如果getTodos方法正在改变并在功能组件中调用，则将getTodos传递给useMemo中的依赖数组是有意义的。通常，您会使用useCallback记住该方法，以便它不会在每个渲染上创建，但只有当它的任何依赖性从封闭范围更改为更新其词法范围内的依赖关系时。现在在这种情况下，您需要将它作为参数传递给依赖关系数组。

但是在您的情况下，您可以省略它。

你也将如何处理初始效果。假如你在提供者安装时在useEffect钩子中调用`getTodos'？你能记住这个电话吗？

您只需在初始安装时调用的Provider中有效

export const TodosProvider: React.FC<any> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, null, init);
  const context = useMemo(() => {
    return {
      todos: state.todos,
      fetchTodos: async id => {
        const todos = await getTodos(id);
        console.log(id);
        dispatch({ type: "SET_TODOS", payload: todos });
      }
    };
  }, [state.todos]);
  useEffect(() => {
      getTodos();
  }, [])
  return <Context.Provider value={context}>{children}</Context.Provider>;
};
1
投票

我不认为有正式答案，所以让我们试着在这里使用一些常识。我发现直接使用useContext非常好，我不知道是谁告诉你的，也许HE / SHE应该指向官方文档。如果不应该使用它，为什么React团队会创建该钩子？ :)

但是，我可以理解，试图避免在value中创建一个巨大的对象作为Context.Provider，一个将状态与操纵它的函数混合在一起，可能与你的例子一样具有异步效果。

但是，在你的重构中，你为你在第一种方法中内联定义的动作创建者引入了一个非常奇怪且绝对不必要的useState。在我看来，你正在寻找useCallback而不是。所以，你为什么不这样混合？

  const useTodos = () => {
    const { state, dispatch } = useContext(Context);
    const fetchTodos = useCallback(async id => {
      const todos = await getTodos(id)
      dispatch({ type: 'SAVE_TODOS', payload: todos })
    }, [dispatch])

    return {
      ...state,
      fetchTodos
    };
}

您的调用代码不需要奇怪的检查来验证fetchTodos确实存在。

export const Todos = id => {
  const { todos, fetchTodos } = useContext(Context);
  useEffect(() => {
    fetchTodos()
  }, []);

  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre>
    </div>
  );
};

最后，除非你真的需要使用来自todos的树中更多组件的fetchTodos + Todos组合，你在问题中没有明确说明，我认为使用Context会在不需要时使问题变得复杂。删除额外的间接层并直接在useReducer中调用useTodos。

这可能不是这种情况，但我发现人们在他们的头脑中混合了许多东西并将一些简单的东西变成了复杂的东西（比如Redux = Context + useReducer）。

希望能帮助到你！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.