面试题：React组件中props的传递与更新机制

props从父组件传递到子组件的过程

在父组件中，将需要传递的数据作为属性（props）添加到子组件标签上。例如：

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = 'Hello, child!';
  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
}

export default ParentComponent;

在子组件中，通过函数参数或类组件的this.props来接收这些属性。例如，函数式组件：

import React from'react';

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

export default ChildComponent;

类组件：

import React, { Component } from'react';

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

export default ChildComponent;

父组件状态更新导致props变化时子组件生命周期函数的响应

类组件：
- componentWillReceiveProps(nextProps)（已过时，不推荐使用）：在组件接收到新的props时被调用，可以在此处根据新老props进行一些逻辑处理，比如更新本地状态。
- getDerivedStateFromProps(nextProps, prevState)：这是一个静态方法，在接收到新的props或state时调用。它应该返回一个对象来更新状态，如果不需要更新则返回null。常用于根据props更新state。
- shouldComponentUpdate(nextProps, nextState)：在接收到新的props或state时调用，返回一个布尔值来决定组件是否需要更新。可以通过比较nextProps和this.props，nextState和this.state来进行性能优化，避免不必要的渲染。
- componentDidUpdate(prevProps, prevState)：在组件更新后被调用，此时可以访问更新后的DOM，进行一些副作用操作，比如数据请求、操作第三方库等。如果需要对比更新前后的props，可以在这个函数中进行。
函数式组件：
- 使用useEffect Hook：可以在函数式组件中模拟类组件的componentDidUpdate行为。通过在依赖数组中传入props，可以在props变化时执行副作用操作。例如：

import React, { useEffect } from'react';

function ChildComponent(props) {
  useEffect(() => {
    // props变化时执行的逻辑
    console.log('Props have changed:', props);
  }, [props]);

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

export default ChildComponent;

星途面试题库

面试题：React组件中props的传递与更新机制

知识考点

面试题答案

props从父组件传递到子组件的过程

父组件状态更新导致props变化时子组件生命周期函数的响应