React Native--组件Component

最新推荐文章于 2022-03-18 15:36:44 发布

寒江蓑笠

最新推荐文章于 2022-03-18 15:36:44 发布

阅读量4.6k

点赞数

分类专栏： React Native 文章标签： React Native 组件 Component

本文链接：https://blog.csdn.net/heqiangflytosky/article/details/53909030

版权

本文详细介绍了React Native中组件的创建、Component的工作原理、生命周期的各个阶段，包括默认属性、初始化状态、props与state的区别、refs的使用以及组件间的通信方式。通过对组件生命周期的理解，有助于更好地控制和优化React Native应用的开发。

摘要由CSDN通过智能技术生成

我的博客原文地址

创建一个Component

一个组件类可以像前面Hello World工程中那样通过 class HelloWorldAppp extends Component 来创建，或者通过React.createClass来创建，并且提供一个render方法以及其他可选的生命周期函数、组件相关的事件或方法定义。

因此，HelloWorldAppp和下面的实现方法是等价的:

var HelloWorldAppp = React.createClass({
  render() {
    return (
      <View

      </View>
    );
  },
});

通过继承Component实现的组件中如果实现getDefaultProps getInitialState等方法时，会有下面警告：

Warning: getDefaultProps was defined on HelloWorldAppp, a plain JavaScript class. This is only supported for classes created using React.createClass. Use a static property to define defaultProps instead.

React组件生命周期

先来看一段代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight
} from 'react-native';

var clickTime = 0;
var HelloWorldAppp = React.createClass({
  getDefaultProps(){
    console.log("getDefaultProps")
    return {
  title:"HelloWorld"}
  },
  getInitialState(){
    console.log("getInitialState")
   return {
  content:"点击屏幕任意位置"}
  },
  componentWillMount(){
    console.log(