【前端架构和框架】react组件化&数据流

React哲学

当你使用 React 构建用户界面时，你首先会把UI界面分解成一个个组件，然后，你需要把这些组件连接在一起，组成一颗组件树使数据流经它们。这就是react组件化和单向数据流思想。

如下图，最终组件渲染成了dom

一、组件化

组件化是 React 的核心思想，它将 UI 拆分为独立、可复用的模块（组件），每个组件专注于实现特定功能。

1. 组件类型(两种)

函数组件：使用函数定义的组件，是 React 推荐的方式

javascript 复制代码

function Button(props) {
  return <button>{props.text}</button>;
}

类组件：使用 ES6 类定义的组件，现在逐渐被函数组件替代

scala 复制代码

class Button extends React.Component {
  render() {
    return <button>{this.props.text}</button>;
  }
}

2. 组件特性

封装性：组件内部实现细节对外隐藏，只通过接口（props）与外部交互
复用性：同一组件可在应用多个地方使用
组合性：组件可以嵌套组合，形成复杂 UI

js 复制代码

function App() {
  return (
    <div>
      <Header />
      <Content>
        <Article />
        <Sidebar />
      </Content>
      <Footer />
    </div>
  );
}

二、数据流

React 采用单向数据流模式，数据在组件间的传递具有明确的方向，使应用状态更可预测。

1. 数据传递方式

父传子（Props） ：父组件通过属性向子组件传递数据

jsx

javascript 复制代码

// 父组件
function Parent() {
  const [message, setMessage] = useState("Hello from parent");
  return <Child text={message} />;
}

// 子组件
function Child(props) {
  return <p>{props.text}</p>;
}

子改变父（回调函数） ：子组件通过调用父组件传递的回调函数改变父组件数据，然后父再传递给子组件，还是父传子。

javascript 复制代码

// 父组件
function Parent() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(count + 1);
  };
  
  return <Child onIncrement={handleIncrement} />;
}

// 子组件
function Child(props) {
  return <button onClick={props.onIncrement}>+</button>;
}

跨组件传递：

Context API：适合中小型应用的跨层级数据共享

jsx

javascript 复制代码

// 创建Context
const ThemeContext = React.createContext("light");

// 提供数据
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 消费数据
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I'm styled by theme context!</button>;
}

状态管理库：如 Redux、MobX 等，适合大型应用的全局状态管理

2. 数据流原则

数据只能从父组件流向子组件（单向数据流）
子组件不能直接修改接收的 props（props 是只读的）
状态（state）通常在需要使用或修改它的组件中定义
当状态需要在多个组件间共享时，应提升到它们最近的共同祖先组件

三、状态管理

本地状态 ：组件内部使用 useState 或 useReducer 管理的状态，仅在组件内部使用
共享状态：需要在多个组件间共享的状态，可通过 Context 或状态管理库管理

总结

理解组件化和数据流有助于构建结构清晰、易于维护的 React 应用。合理的组件拆分和数据流向设计，能显著提高代码的可复用性和可维护性。