本文共 3810 字,大约阅读时间需要 12 分钟。
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 are JavaScript ES2015 classes that extend a base class from React called Component
.
类组件是JavaScript ES2015类,它从React扩展了一个名为Component
的基类。
class App extends Component { render () { return (Hello World! ) }}
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 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 (Page One
);}
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.
功能组件通常仅用于显示目的-这些组件从父组件调用函数以处理用户交互或状态更新。
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 (); }} Count: {this.state.counter}
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 ();}; {children}
翻译自:
转载地址:http://pozzd.baihongyu.com/