回调函数究竟有啥使用价值，有否例子，效率如何

Posted 2023-05-16

参考技术A 从功能上来说 普通函数也是可以的
但在比较大的程序设计中 会对很多功能模块进行封装
比如 上层一个模块
底层一个模块

同时规定，上层可以调用底层的函数，但是底层不可以调用上层函数。
这时就需要使用回调函数。
通过上层调用底层的注册回调借口，传入回调指针。
实现底层通知上层的作用。

另外 回调函数的一个好处是，可以通过回调函数，调用不同接口。
比如接收数据，不同数据需要不同的解析函数。
但是接收数据的流程是相同的
这样 使用回调函数，在接收数据的时候就可以不用判断，而是自动使用不同的解析函数。

总之 使用回调函数，可以降低耦合，实现多样性。

如何在 mapDispatchToProps 或更新道具后运行回调函数，使用 react redux？

【中文标题】如何在 mapDispatchToProps 或更新道具后运行回调函数，使用 react redux？

【英文标题】：How to run callback function after mapDispatchToProps OR update the props, using react redux?

【发布时间】：2020-08-01 02:01:09

【问题描述】：

这是一个例子。

我的代码是：

const mapDispatchToProps = dispatch => (
  onChangeHandler: (name,value) =>
    dispatch( type: "REGISTRATION", key: name, value )
);

但我需要这样的东西：

const mapDispatchToProps = dispatch => (
    onChangeHandler: (name,value) =>
    dispatch( type: "REGISTRATION", key: name, value ).then((nextProps)=>console.log(nextProps))
);

请帮助我们。

【参考方案1】：

const mapDispatchToProps=dispatch=>(
  addToCartHandler:data=>dispatch(addToCart(data)),
  removeToCartHandler:data=>dispatch(removeToCart(data))
)

【参考方案2】：

开箱即用的 Redux 数据流是同步的，因此“然后”调度没有意义，因为它不返回任何内容。您可以在此处阅读更多相关信息：

https://redux.js.org/advanced/async-flow

我建议查看 redux-thunk，它允许您决定何时调度，是同步还是异步，并允许您从存储中检索更新的状态。它通过允许你调度一个函数而不是一个动作来做到这一点。该功能为您提供dispatch 和getState。

这是一个例子：

const onChangeHandler = (name, value) => (dispatch, getState) => 
    // Dispatch event
    dispatch( type: "REGISTRATION", key: name, value );

    // Get updated state
    console.log("state :", getState());
;

export default connect(null,  onChangeHandler )(MyComponent);

但是，如果您正在考虑从组件中创建商店更新的副作用，我建议您使用 useEffect 挂钩来响应由于 redux 商店状态更新组件道具而导致的更新.

这是一个例子：

const MyComponent = (key, value) => 
    useEffect(() => 
        console.log(`key or value updated: $key $value`);
    , [key, value]);

    return (
        <span>Current props are key and value</span>
    )
;