本文共 1084 字，大约阅读时间需要 3 分钟。

钩子函数与回调函数的区别解析

钩子函数是系统预先定义的特定函数，当系统发生特定事件时会自动调用。这些函数不需要用户主动触发，而是由系统触发。开发者在使用时只需直接编写函数体即可，无需像回调函数那样通过参数传递调用。例如，React框架中的生命周期函数和Vue框架中的生命周期函数都是典型的钩子函数。

在现实开发中，回调函数的概念更为常见。它指的是一个函数作为另一个函数的参数传递并被调用时，会被后者执行。例如，在React中，当父组件的状态发生变化时，会自动调用子组件的回调函数。这种机制使得代码更加简洁，减少了手动管理状态的需求。

以下是通过React代码示例来说明回调函数的使用场景：

"use strict";
class Person extends React.Component {
  state = {
    persons: [
      { id: 1, name: "小李", age: 18 },
      { id: 2, name: "小张", age: 20 }
    ]
  };
  addXiaoWang = () => {
    const { persons } = this.state;
    persons.push({ id: 3, name: "小王", age: 30 });
    this.setState({ persons });
  };
  render() {
    return (
      
   
        
    
展示人员信息
        
    添加一个小王
        
    
     
          {this.state.persons.map((personObj) => {
            return (
              
     
                {personObj.name}----{personObj.age}
                
              
            );
          })}
        
    
      
   
    );
  }
}
ReactDOM.render(
   , document.getElementById("test"));

在以上代码中，addXiaoWang 是一个回调函数。当按钮被点击时，onClick 属性会将 this.addXiaoWang 作为回调函数调用。这种设计使得代码更加简洁，逻辑更加清晰。

转载地址：http://xveq.baihongyu.com/