反应原生纯组件与组件 - Javascript

在 React 中，有两种组件：原生纯组件和组件。虽然这些组件都是由 React 构建的，但它们有不同的目的和用法。

原生纯组件

原生纯组件是一个函数，其输入是一个 props 对象，返回一个描述 component UI 的 JSX 元素。它不会在自己的生命周期中维护任何状态， 从而使得渲染结果可以被缓存和复用。

下面是一个简单的例子：

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

在这个例子中，Greeting 是一个原生纯组件，它接受一个 name 属性，并输出一个包含 name 的问候语。

原生纯组件的好处在于它们产生的输出对于相同的属性总是一致的，这样就可以通过比较输入属性 (也就是 props) 来达到快速的渲染。

组件

组件是一个类或一个函数，它不仅可以描述 UI，还可以包括内部的状态和生命周期方法。和原生纯组件不同，一个组件可能会重新渲染多次，因此它的状态是可变的。

下面是一个简单的例子：

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

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

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

在这个例子中，Counter 是一个组件，它有一个内部状态 count 和一个 handleClick 方法，用于增加计数器的值。当状态改变时，React 会重新渲染整个组件，从而使得 UI 反映出新的状态。

组件可以使得代码更具有模块化和可复用性，同时可以使得应用程序更加动态和交互。但是，与原生纯组件相比，组件更容易引入错误和潜在的性能问题。

结论

在 React 中，原生纯组件和组件都有自己的优缺点和用法。当你只需要简单地展示一些静态内容时，使用原生纯组件；当你需要一个有内部状态和生命周期方法的可交互组件时，使用组件。

在实际的开发过程中，你可以根据自己的需求灵活地选择使用这两种类型的组件，以便让你的代码更加简单和高效。