React构建组件的多种方式和比较

2024-01-19 14:43:45

JSX

JSX（JavaScript XML）是一种语法扩展，允许你在JavaScript中编写XML。它非常适合构建React组件，因为它可以让你将HTML和JavaScript混合在一起，从而使代码更具可读性和可维护性。

const MyComponent = () => {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  );
};

函数式组件

函数式组件是最简单、最直接的组件类型。它只是一个接受props（属性）并返回一个React元素的函数。

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

类组件

类组件是更复杂的一种组件类型。它是一个继承自React.Component类的类。类组件可以有状态、生命周期方法和事件处理程序。

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

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
      </div>
    );
  }
}

高阶组件

高阶组件（HOC）是一种函数，它接受一个组件并返回一个新的组件。HOC可以用来增强组件的功能，比如添加状态管理、数据获取或其他逻辑。

const withCounter = (Component) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }

    render() {
      return (
        <Component {...this.props} count={this.state.count} />
      );
    }
  };
};

const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.count}</h1>
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button>
    </div>
  );
};

const MyComponentWithCounter = withCounter(MyComponent);

Hooks

Hooks是React 16.8版本引入的新特性。Hooks允许你在函数式组件中使用状态、生命周期方法和事件处理程序。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

Context API

Context API是React 16.3版本引入的新特性。Context API允许你在组件树中共享数据，而无需手动传递props。

const MyContext = React.createContext(null);

const MyProvider = (props) => {
  return (
    <MyContext.Provider value={props.value}>
      {props.children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const value = useContext(MyContext);

  return (
    <div>
      <h1>{value}</h1>
    </div>
  );
};

比较

方式	优点	缺点
JSX	可读性强、可维护性强	需要编译
函数式组件	简单、直接	没有状态、生命周期方法和事件处理程序
类组件	复杂、功能强大	难以理解、难以维护
高阶组件	可重用性强	难以理解、难以维护
Hooks	简单、易用	仅限函数式组件
Context API	组件树中共享数据	难以理解、难以维护