react类传参与函数传参

### React 类组件与函数组件参数传递方式对比

#### 函数组件中的参数传递

对于函数组件而言，所有的属性都通过 `props` 对象作为参数传入到组件内部。当需要向子组件传递数据时，只需简单地将所需的数据作为属性添加即可。

function ChildComponent(props) {
    return (
        <div>
            {props.message}
        </div>
    );
}

// 使用ChildComponent并传递message prop
<ChildComponent message="Hello from parent!" />

如果要传递方法，则可以像下面这样操作：

const ParentComponent = () => {

  const handleClick = (event, id) => {
      console.log(`Button clicked with ID ${id}`);
  };

  return (
      <button onClick={(e) => handleClick(e, 'uniqueId')}>Click Me</button>
  )
};

为了使函数组件支持 ref 转发以便于访问底层 DOM 或者自定义行为，可采用 `forwardRef` 和 `useImperativeHandle` API 来实现[^2]。

#### 类组件中的参数传递

在类组件中，同样也是利用 `this.props` 接收来自父级的属性值。不过由于类组件拥有自己的状态管理机制以及生命周期钩子，在某些场景下可能会更加灵活一些。

class ClassChild extends React.Component {
  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}

// 使用ClassChild并传递message prop
<ClassChild message="Hello from class component's parent!" />;

而关于事件处理器方面，通常会在构造器里绑定上下文环境或者是使用箭头函数来简化这一过程:

class Button extends React.Component {
  
  constructor(props){
    super(props);
    
    this.handleClick = this.handleClick.bind(this); // 明确指定this指向
  }

  handleClick(event){
     alert('This button was clicked!');
  }

  render(){
    return(
       <button onClick={this.handleClick}>
          Click me!
       </button>
    );
  }
}

另外一种更为简洁的方式是在 JSX 中直接定义内联回调函数，但是需要注意性能损耗问题[^4]。

#### 总结

无论是哪种类型的组件，React 都遵循单向数据流的原则——即从上至下的父子关系来进行属性和方法的传播。尽管两者之间存在差异，但在大多数情况下都能互换使用，并且随着 Hooks 的引入，许多原本只有类组件才具备的能力现在也可以轻松应用于函数组件之中[^3]。