面试官又问我是否了解React的单向数据流

"React 的单向数据流让数据变化更可预测，这是 React 设计的基石。"

介绍

单向数据流：从字面意思我们就可以理解只能从一端到另一端，而不是反过来。

在React中的表现就是，数据在组件树中自上而下传递，从父组件流向子组件。

单向传递

js 复制代码

// 父组件传递数据
function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} />;
}

// 子组件接收只读props
function Child({ count }) {
  return <div>{count}</div>;
}

子组件如何影响父组件

另一方面，父组件可以通过props 将数据传递给子组件，子组件不能直接修改父组件传递过来的props，只能通过触发父组件传递的回调函数来间接更新父组件的状态。

js 复制代码

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）

js 复制代码

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 搭配使用来管理复杂的状态。

留个思考：这时候可能面试官会问你，既然是单向数据流，那怎么实现逆向通信呢？？