React Native中的功能与类组件

In React Native, there are two main types of components that make up an application: functional components and class components. These are structured the same as they would be in a regular React app for the web.

在React Native中，组成应用程序的组件主要有两种类型： 功能组件和类组件 。 这些结构与常规的Web应用程序中的结构相同。

类组件 (Class Components)

Class components are JavaScript ES2015 classes that extend a base class from React called Component.

类组件是JavaScript ES2015类，它从React扩展了一个名为Component的基类。

class App extends Component {
    render () {
        return (
            <Text>Hello World!</Text>
        )
    }
}

This gives the class App access to the React lifecycle methods like render as well as state/props functionality from the parent.

这使类App可以访问React生命周期方法(例如来自父级的render以及状态/道具功能)。

功能组件 (Functional Components)

Functional components are simpler. They don’t manage their own state or have access to the lifecycle methods provided by React Native. They are literally plain old JavaScript functions, and are sometimes called stateless components.

功能组件更简单。 他们不管理自己的状态，也无法访问React Native提供的生命周期方法。 它们实际上是普通的旧JavaScript函数，有时也称为无状态组件。

const PageOne = () => {
    return (
        <h1>Page One</h1>
    );
}

摘要 (Summary)

Class components are used as container components to handle state management and wrap child components.

类组件用作处理状态管理和包装子组件的容器组件。

Functional components generally are just used for display purposes - these components call functions from parent components to handle user interactions or state updates.

功能组件通常仅用于显示目的-这些组件从父组件调用函数以处理用户交互或状态更新。

有关组件状态的更多信息 (More info about component state)

组件状态 (Component State)

In Class components, there is a way to store and manage state built in to React Native.

在Class组件中，有一种方法可以存储和管理React Native内置的状态。

class App extends Component {
  constructor () {
    super();
    this.state = {
      counter: 0
    };
  }
  incrementCount () {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  decrementCount () {
    this.setState({
      counter: this.state.counter - 1
    });
  }
  render () {
    return (
      <View>
        <Text>Count: {this.state.counter}</Text>
        <Button onPress={this.decrementCount.bind(this)}>-</Button>
        <Button onPress={this.incrementCount.bind(this)}>+</Button>
      </View>
    );
  }
}

State is similar to props, but it is private and fully controlled by the component. Here, the constructor() method is calling the parent class’ constructor with super(); - Component is the parent class of App because we are using the extends keyword. The constructor() method also initializes the component’s state object:

状态类似于道具，但它是私有的，并由组件完全控制。 在这里， constructor()方法使用super();调用父类的构造函数super(); - Component是App的父类，因为我们正在使用extends关键字。 constructor()方法还初始化组件的状态对象：

this.state = {
  counter: 0
};

The state can be displayed within the component:

该状态可以显示在组件内：

{this.state.counter}

Or updated by calling:

或通过调用更新：

this.setState({});

Note: Aside from its initial creation in your component’s constructor() method, you should never directly modify the component’s state with this.state =. You must use this.setState as can be seen in the incrementCount and decrementCount functions above.

注意：除了在组件的constructor()方法中最初创建组件之外，永远不要使用this.state =直接修改组件的状态。 您必须使用this.setState如上面的incrementCount和decrementCount函数所示。

The count is incremented and decremented by calling the functions passed to the onPress handlers just like they would be if you called a click handler from JavaScript on the web.

通过调用传递给onPress处理程序的函数来增加和减少计数，就像从Web上JavaScript调用单击处理程序一样。

ASIDE: In the first example, <Button> is a custom component; it’s a combination of <TouchableOpacity> and <Text> from the React Native API:

旁白：在第一个示例中， <Button>是自定义组件； 它是React Native API中的<TouchableOpacity>和<Text>的组合：

const Button = ({ onPress, children, buttonProps, textProps }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    <TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
      <Text style={[textStyle, textProps]}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

有关React Native的更多信息： (More info on React Native:)

• React Native Guide

  React Native指南

翻译自: https://www.freecodecamp.org/news/functional-vs-class-components-react-native/