方式挺多的，先说最常用的通过props进行父子组件的数据传递和修改以及原理
在React中，props不仅用于传递数据，它们也可以传递可以执行的函数，这使得子组件能够间接更新父组件的状态。这种方法强化了React的单向数据流策略，即数据总是从上向下（从父组件到子组件）流动。
实例分析
考虑一个场景，我们有一个父组件ParentComponent管理一个文本状态，和一个子组件ChildComponent展示一个按钮，当按钮被点击时更新父组件的状态。
function ParentComponent() {
const [text, setText] = useState('初始文本');
const handleTextChange = newText => {
setText(newText);
};
return <ChildComponent onTextChange={handleTextChange} />;
}
function ChildComponent({ onTextChange }) {
return <button onClick={() => onTextChange('更新后的文本')}>点击我</button>;
}
这里，ChildComponent通过点击按钮调用onTextChange，这实际上触发了ParentComponent中的handleTextChange方法，从而更新了父组件的状态。
原理分析：
在React中，子组件可以通过调用父组件传递给它的函数来影响父组件的状态。这个过程主要涉及到两个重要的JavaScript和React的概念：函数作为一等公民和闭包。
函数作为一等公民
在JavaScript中，函数可以像任何其他变量一样被传递和赋值。因此，在React中，你可以把一个函数作为prop从父组件传递给子组件。子组件接收到这个函数后，可以在适当的时候调用它。
闭包
当父组件中的函数被定义时，它能够“记住”并访问它被创建时所在的环境中的变量。即使这个函数被传递到另一个组件中去执行，它仍然能够访问原来的环境中的变量。这就是闭包的作用。
使用步骤
- 在父组件中定义函数：你在父组件中创建一个函数，比如
handleDataChange。这个函数能够更新父组件的状态。 - 将函数传递给子组件：通过props，这个函数被传递到子组件。
- 子组件调用这个函数：在子组件中，当某个事件发生（比如按钮点击），子组件就调用这个函数。
实例
假设你有一个按钮在子组件中，当按钮被点击，子组件调用从父组件接收到的函数：
function ChildComponent({ onDataChange }) {
return <button onClick={() => onDataChange('new data')}>Change Data</button>;
}
这里的 onDataChange 函数实际上是父组件中的 handleDataChange 函数，当点击按钮时，这个函数被调用，参数 'new data' 被传递回父组件。
function ParentComponent() {
const [data, setData] = useState('Initial data');
const handleDataChange = newData => {
setData(newData);
};
return <ChildComponent onDataChange={handleDataChange} />;
}
在这个例子中，handleDataChange 更新了父组件的状态。尽管这个函数在子组件中被调用，但因为JavaScript的闭包特性，它仍可以访问和修改父组件的状态。
其他的方式
在 React 中，除了通过 props 传递回调函数来让子组件影响父组件的状态之外，还有几种其他的方法可以实现组件间的状态管理和通信。这些方法各有适用场景，可以根据应用的复杂度和需求选择最合适的一种。以下是一些常见的方法：
1. Context API
React 的 Context API 允许你在组件树中直接传递数据，而无需手动在每个层级传递 props。这对于要在许多不同层级的组件间共享数据的情况非常有用，如用户认证状态、主题设置等。
使用示例：
const MyContext = React.createContext();
function ParentComponent() {
const [value, setValue] = useState("initial");
return (
<MyContext.Provider value={{ value, setValue }}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const { setValue } = useContext(MyContext);
return (
<button onClick={() => setValue("updated from child")}>
Update Value
</button>
);
}
这里，ChildComponent 可以通过 useContext 钩子直接访问到由 ParentComponent 提供的 setValue 函数，并使用它来更新状态。
2. Redux
Redux 是一个用于管理应用状态的库，它提供了一个中央状态容器，允许你在应用的任何地方访问和修改状态。这在大型应用或多个组件需要访问同一状态时非常有用。
使用示例：
import { createStore } from 'redux';
function reducer(state = { value: "initial" }, action) {
switch (action.type) {
case "UPDATE_VALUE":
return { ...state, value: action.value };
default:
return state;
}
}
const store = createStore(reducer);
function ParentComponent() {
const value = store.getState().value;
return (
<div>
<ChildComponent />
<p>{value}</p>
</div>
);
}
function ChildComponent() {
return (
<button onClick={() => store.dispatch({ type: "UPDATE_VALUE", value: "updated from child" })}>
Update Value
</button>
);
}
在这个例子中，ChildComponent 使用 Redux store 发送一个 action 来更新全局状态，ParentComponent 显示这个状态。
3. React Hooks：useState, useReducer
对于更简单的场景，React 的内建钩子 useState 和 useReducer 提供了轻量级的状态管理能力，这对于独立组件或小型应用是足够的。
使用 useReducer 示例：
function ParentComponent() {
const [state, dispatch] = useReducer(reducer, { value: "initial" });
return (
<div>
<ChildComponent dispatch={dispatch} />
<p>{state.value}</p>
</div>
);
}
function ChildComponent({ dispatch }) {
return (
<button onClick={() => dispatch({ type: "UPDATE_VALUE", value: "updated from child" })}>
Update Value
</button>
);
}
这里，useReducer 提供了一种更灵活的方式来处理复杂的状态逻辑，而不必使用外部的状态管理库。
日常开发中使用频率高低排名
props这种不用说，是最高的，我们看其他几种方式
1. React内建的Hooks（useState, useReducer）
常用性： 非常高
适用场景：
- 小到中型的应用
- 组件内部状态管理
- 简单的父子组件通信
Hooks 提供了一种轻量级的方式来管理组件的状态，是React官方推荐的状态管理方式。特别是useState和useReducer，它们适用于大多数日常开发需求，简化了状态逻辑并减少了额外依赖。
2. Context API
常用性： 高
适用场景：
- 需要在多个组件间共享状态时
- 避免多层级prop透传的场景
- 主题切换、用户偏好设置、权限管理等
Context API 提供了一种在组件树中传递数据的方法，无需通过每个层级显式传递props。这使得它成为管理全局数据（如用户认证信息、主题设置）的理想选择。
3. Redux
常用性： 中到高
适用场景：
- 大型应用
- 复杂的状态逻辑，多个组件需要访问相同的状态
- 强大的调试工具和中间件支持需求
Redux 是一个独立于React的库，但在React社区中非常流行，尤其适用于大型或高度复杂的应用。它提供了严格的状态管理模式和强大的开发工具，如Redux DevTools。
4. MobX
常用性： 中
适用场景：
- 中到大型应用
- 更自然的响应式编程模型
- 简化状态管理，自动追踪状态变化
MobX 提供了另一种状态管理方式，它通过透明的函数响应式编程（FRP）使状态管理变得直观和自动化。对于需要简单、高效状态同步的应用，MobX是一个很好的选择。
总结
选择哪种状态管理技术取决于多种因素：
- 应用大小和复杂度：小型应用可能只需
useState或useReducer，而大型应用可能更适合使用Redux或MobX。 - 团队熟悉度：选择团队成员熟悉的技术可以加快开发速度和降低学习成本。
- 特定需求：如需要时间旅行调试、中间件或特殊的响应式需求等。