React 基础面试题, 如何将事件传递给 React 子组件?

Step 1

Q:: 如何将事件传递给 React 子组件？

A:: 在 React 中，可以通过将事件处理函数作为 props 传递给子组件的方式来将事件传递给子组件。父组件定义一个事件处理函数，然后将该函数作为 props 传递给子组件，子组件可以通过调用这个函数来通知父组件发生了某些事件。例如：

 
function ParentComponent() {
  const handleChildClick = (data) => {
    console.log('Child clicked!', data);
  };
  return <ChildComponent onClick={handleChildClick} />;
}
 
function ChildComponent({ onClick }) {
  return <button onClick={() => onClick('data from child')}>Click me</button>;
}
 

这里，handleChildClick 是父组件的一个函数，传递给子组件 ChildComponent，当子组件中的按钮被点击时，它会调用 onClick 函数并传递数据给父组件。

Step 2

Q:: React 中 props 和 state 有什么区别？

A:: props 是组件的输入参数，由父组件传递给子组件，通常是静态的，不能在组件内部修改。而 state 是组件内部的状态，是动态的，可以通过 this.setState 在组件内部修改。props 是只读的，而 state 可以随时间变化。

Step 3

Q:: React 组件生命周期有哪些？

A:: React 组件生命周期主要分为三个阶段：装载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有相应的生命周期方法，例如： - 装载：componentDidMount - 更新：shouldComponentUpdate``, componentDidUpdate - 卸载：componentWillUnmount 这些方法可以用来在组件的不同阶段执行特定的操作，比如在 componentDidMount 中进行数据请求。

Step 4

Q:: React 中如何进行状态提升？

A:: 状态提升是指将多个子组件需要共享的状态提升到它们最近的公共祖先组件中。通过将状态存储在父组件中，并通过 props 传递给子组件，这样子组件就可以通过调用父组件的方法来更新状态。这通常用于多个组件需要同步某些状态的场景。例如，在多个表单字段需要共享同一个值时，可以通过状态提升来实现。