“React 的单向数据流让数据变化更可预测，这是 React 设计的基石。”
介绍
单向数据流：从字面意思我们就可以理解只能从一端到另一端，而不是反过来。
在React中的表现就是，数据在组件树中自上而下传递，从父组件流向子组件。
单向传递
// 父组件传递数据
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} />;
}
// 子组件接收只读props
function Child({ count }) {
return <div>{count}</div>;
}
子组件如何影响父组件
另一方面，父组件可以通过props将数据传递给子组件，子组件不能直接修改父组件传递过来的props，只能通过触发父组件传递的回调函数来间接更新父组件的状态。
function Parent() {
const [count, setCount] = useState(0);
const handleIncrement = () => setCount(c => c + 1);
return <Child onIncrement={handleIncrement} />;
}
function Child({ onIncrement }) {
return <button onClick={onIncrement}>+1</button>;
}
这样的设计的好处就是自上而下的数据流动，使得组件之间的关系更加清晰，数据变化更容易追踪。
如果随便一个子组件都能修改父组件的数据，那数据就会变得不可控，一旦出了问题，都难以查找。
优点
简单总结一下单向数据流的好处：
- 解耦：子组件不直接依赖父组件，仅通过props接口通信
- 可预测性：组件间的通信更为清晰，出了问题直接往props中找。
跨组件通信
可能看到这里，就会有小伙伴发现一个问题，拿要是组件嵌套n层，props岂不是要传递n层，一层一层传下来？ emm 也不是不可以。当然 React 也意识到了这个问题，所以给我们提供了 context 这个玩意。
Context 让父组件可以为它下面的整个组件树提供数据。
用法也很简单：
- 先创建 Context （createContext）；
- 再传递 （Provider）；
- 再消费（useContext）
import { createContext, useContext, useState } from 'react';
// 创建 Context
const UserContext = createContext({
user: null,
login: () => {},
logout: () => {},
});
function App() {
const [user, setUser] = useState(null);
const login = (name) => setUser({ name });
const logout = () => setUser(null);
return (
<UserContext.Provider value={{ user, login, logout }}>
<AuthButton />
</UserContext.Provider>
);
}
function AuthButton() {
const { user, login, logout } = useContext(UserContext);
return user ? (
<button onClick={logout}>退出登录（当前用户：{user.name}）</button>
) : (
<button onClick={() => login('张三')}>登录</button>
);
}
不要滥用
每当 Provider 的 value 变化时，所有使用这个 Context 的子组件都会重新渲染！！！
所以当我们使用Context之前，应该先问问自己 能不能先使用props，
使用场景
React 官网也给我们举了几个例子：
- 主题切换
- 存储账号信息：许多组件可能需要知道当前登录的用户信息
- 路由：比如我们需要知道当前是那个路由，需要高亮。
- 将 reducer 与 context 搭配使用来管理复杂的状态。
留个思考：这时候可能面试官会问你，既然是单向数据流，那怎么实现逆向通信呢？？
