面试题：React中Props单向数据流在父子组件间传递的原理及应用

父组件向子组件传递数据：
- 在React中，父组件通过在子组件标签上以属性的形式传递数据给子组件。例如，有一个父组件ParentComponent和一个子组件ChildComponent。
```
import React from'react';

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

const ParentComponent = () => {
  const data = "Hello from parent";
  return <ChildComponent message={data} />;
};

export default ParentComponent;
```
- 在上述代码中，ParentComponent定义了一个变量data，然后在渲染ChildComponent时，将data作为message属性传递给ChildComponent。子组件通过props对象来接收这些数据，在ChildComponent中可以通过props.message来访问父组件传递过来的"Hello from parent"。这种传递方式是单向的，即数据从父组件流向子组件，子组件不能直接修改从父组件接收到的props。

通过回调函数：
- 父组件定义一个函数，并将其作为props传递给子组件。当子组件状态发生变化时，调用这个从父组件传递过来的函数，并将相关数据作为参数传递给该函数。
```
import React, { useState } from'react';

const ChildComponent = (props) => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    props.onCountChange(count + 1);
  };
  return <button onClick={handleClick}>Increment {count}</button>;
};

const ParentComponent = () => {
  const handleChildCountChange = (newCount) => {
    console.log(`Child component count changed to: ${newCount}`);
  };
  return <ChildComponent onCountChange={handleChildCountChange} />;
};

export default ParentComponent;
```
- 在上述代码中，ParentComponent定义了handleChildCountChange函数，并将其作为onCountChange属性传递给ChildComponent。ChildComponent内部有一个状态count和一个按钮，当按钮点击时，count增加，同时调用props.onCountChange，并将新的count值传递过去，这样父组件就可以接收到子组件状态变化的信息。这种方式依然遵循Props单向数据流特性，数据变化是通过父组件传递给子组件的回调函数来通知父组件的。

星途面试题库