面试题：React 中 Props 传递基本规则及应用

Question

在 React 中，如何通过 Props 实现父组件向子组件传递数据？请举例说明，并阐述传递对象和数组类型数据时的注意事项。

Answer 1

1. 通过Props实现父组件向子组件传递数据：
   • 在React中，父组件通过在子组件标签上以属性的形式传递数据给子组件，子组件通过props对象来接收这些数据。
   • 示例：
     • 父组件App.js：

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

function App() {
    const message = 'Hello from parent';
    return (
        <div>
            <ChildComponent text={message} />
        </div>
    );
}

export default App;

 - 子组件`ChildComponent.js`：

import React from'react';

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

export default ChildComponent;

2. 传递对象和数组类型数据时的注意事项：
   • 不可变性：React遵循单向数据流原则，传递的对象和数组应该保持不可变性。例如，不要直接修改props中的对象或数组。如果需要修改，应该创建一个新的副本进行操作。
   • 深层比较：当传递对象或数组时，React默认进行浅比较。如果对象或数组内部结构发生变化，但引用地址不变，React可能不会重新渲染子组件。可以使用React.memo结合深层比较库（如lodash/isEqual）来优化子组件渲染。例如：

import React from'react';
import { isEqual } from 'lodash';

function ChildComponent(props) {
    return (
        <div>
            {/* 展示对象或数组数据 */}
        </div>
    );
}

export default React.memo(ChildComponent, (prevProps, nextProps) => {
    return isEqual(prevProps.data, nextProps.data);
});

• 性能优化：传递大型对象或数组时，要注意性能。尽量减少不必要的数据传递，确保传递的数据是子组件真正需要的，避免不必要的重新渲染。