React 从面向组件编程看整体思路

面向组件编程是 React 的一种编程模式，它将用户界面划分为独立的、可重用的组件。组件可以看作是 UI 的基本构建块，每个组件都有自己的状态、行为和视图。这种模式使得复杂的 UI 可以被分解成更小的、更容易管理的单元，从而使代码更易于维护和扩展。

React 中有两种类型的组件：函数式组件和类式组件。

函数式组件

函数式组件是 React 中最简单的组件类型，它们只是接受一些输入，然后返回一个 React 元素。函数式组件通常用于简单的、不变的 UI 元素，例如按钮、输入框等。

const Button = (props) => {
  return <button onClick={props.onClick}>{props.label}</button>;
};

类式组件

类式组件是 React 中更复杂的组件类型，它们具有状态和生命周期方法。类式组件通常用于复杂、可交互的 UI 元素，例如表单、对话框等。

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

组件之间可以通过 props（属性）进行通信。props 是父组件传递给子组件的数据，子组件可以通过 props 来获取父组件的数据。例如，在下面的代码中，父组件将 label 和 onClick props 传递给子组件 Button。

const App = () => {
  return (
    <div>
      <Button label="Click me!" onClick={() => { alert('Button clicked!'); }} />
    </div>
  );
};

组件还可以通过状态进行通信。状态是组件内部的数据，它可以在组件的生命周期中发生变化。组件可以通过 setState() 方法来更新状态，状态的变化会触发组件的重新渲染。例如，在下面的代码中，Form 组件的状态 value 会在用户输入时发生变化，状态的变化会触发组件的重新渲染，从而更新输入框中的值。

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <form>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </form>
    );
  }
}

通过面向组件编程，我们可以将复杂的 UI 分解成更小的、更容易管理的单元，从而使代码更易于维护和扩展。