组件与容器反应 - Javascript

在 React 中，组件和容器是开发应用的基础。组件是应用中的可重用部分。容器是组件的包装器，用来管理组件的状态并将其传递给其他组件。

组件

组件是应用中的可重用部分，用来呈现和操作数据。在 React 中，组件可以是函数组件或类组件。

函数组件

函数组件是一种定义组件的简单方式，它只是一个返回 React 元素的函数。函数组件没有自己的状态，它只接受 props 作为参数并返回 React 元素。

例如，以下是一个简单的函数组件：

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

这可以作为一个 React 元素使用：

const element = <Welcome name="Alice" />;

类组件

类组件是使用 ES6 class 关键字定义的组件。它们具有自己的状态和生命周期方法。

以下是一个简单的类组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

这样就可以像函数组件一样使用：

const element = <Welcome name="Alice" />;

容器

容器是管理组件状态的组件。容器是一个高阶组件，它接受一个或多个组件作为参数，并将它们的状态传递给这些组件。

以下是一个简单的容器例子：

class CounterContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    const { count } = this.state;
    return (
      <>
        <h1>Counter</h1>
        <p>Count: {count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </>
    );
  }
}

这个容器会管理一个计数器的状态，并展示一个按钮来增加计数器的值。这个容器还会传递这个状态值给子组件。

现在，我们可以将这个容器和一个组件结合起来：

function Counter(props) {
  return <p>Count: {props.count}</p>;
}

const CounterWithContainer = () => (
  <CounterContainer>
    {(props) => <Counter count={props.count} />}
  </CounterContainer>
);

这个 CounterWithContainer 组件会渲染一个 Counter 组件，并将来自容器的状态值传递给它。

总结

在 React 中，组件和容器是应用程序的基础。组件是应用程序中的可重用部分，容器是组件的包装器，用来管理组件的状态。通过组合组件和容器，我们可以构建出更加复杂的应用程序。