zoukankan      html  css  js  c++  java
  • 如何避免向下传递回调

    发现大部分人并不喜欢在组件树的每一层手动传递回调。尽管这种写法更明确,但这给人感觉像错综复杂的管道工程一样麻烦。

    在大型的组件树中,我们推荐的替代方案是通过 context 用 useReducer 往下传一个 dispatch 函数:

    const TodosDispatch = React.createContext(null);
    
    function TodosApp() {
      // 提示:`dispatch` 不会在重新渲染之间变化
      const [todos, dispatch] = useReducer(todosReducer);
    
      return (
        <TodosDispatch.Provider value={dispatch}>
          <DeepTree todos={todos} />
        </TodosDispatch.Provider>
      );
    }
    

    TodosApp 内部组件树里的任何子节点都可以使用 dispatch 函数来向上传递 actions 到 TodosApp:

    function DeepChild(props) {
      // 如果我们想要执行一个 action,我们可以从 context 中获取 dispatch。
      const dispatch = useContext(TodosDispatch);
    
      function handleClick() {
        dispatch({ type: 'add', text: 'hello' });
      }
    
      return (
        <button onClick={handleClick}>Add todo</button>
      );
    }
    

    总而言之,从维护的角度来这样看更加方便(不用不断转发回调),同时也避免了回调的问题。像这样向下传递 dispatch 是处理深度更新的推荐模式。

    注意,你依然可以选择是要把应用的 state 作为 props 向下传递(更显明确)还是作为作为 context(对很深的更新而言更加方便)。如果你也使用 context 来向下传递 state,请使用两种不同的 context 类型 —— dispatch context 永远不会变,因此组件通过读取它就不需要重新渲染了,除非它们还需要应用的 state。

  • 相关阅读:
    [20190905] 考试卷子分析
    tmp
    分层图——孤岛营救
    [BNDSOJ] #1106代码
    [BNDSOJ] 小P的数列代码
    补充[BNDSOJ]小p的数列
    针对【H-2017年信息基础班(周一班)】某些同学恶意使用lyl洛谷的谴责
    #1086. 受欢迎的牛
    [sol]250OJ 1~10
    编译原理之词法分析(大三生活第21天,度过了一段萎靡的时光)
  • 原文地址:https://www.cnblogs.com/wangwenhui/p/14900523.html
Copyright © 2011-2022 走看看