React Natvie 参数函数对象类-Toy模板网

这篇具有很好参考价值的文章主要介绍了React Natvie 参数函数对象类。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

函数组件只需要接受props参数并且返回一个React元素，class组件需要继承component，还需要创建render 并且返回React元素，语法看起来麻烦点。

类组件有this,有生命周期，有状态state。

import React,{Component} from 'react'
import {View,Text} from 'react-native'
export default class App extends Component{
    render(){
        return(
                <View>
                    <Text >Hello Word</Text>
                </View>
        )
    }
}

函数组件没有this,没有生命周期，没有状态state。

import React,{Component} from 'react'
import {View,Text} from 'react-native'
const SiteNameComponent = (props) => {
   return (
      <View>
         <Text >Hello Word </Text>
      </View>
   )
}

props理解

props 和我们OC中的属性比较相似，是用来组件之间单向传值用的。

不需要提前声明，组件传值；

//classA组件
export class classA extends Component {
  render() {
    return (<Text>Hello {this.props.name}!</Text>);
  }
}

//classB组件
export class classB extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        //调用classA组件，并对name变量赋值
        <classA name='Hello Word' />
      </View>
    );
  }
}

2.组件中必须包含某种变量类型的某变量，就要用到PropTypes做声明；
3.可以设置默认值；

export class classA extends Component {
  static propTypes: {
    //设置title变量的类型
    title: React.PropTypes.string.isRequired,
  },
static defaultProps = {  
   title:'Hello Word',  
 }  
  render() {
     return (
        <View>
          <Text>  {this.props.title} </Text>
        </View>
     );
  }
}

state

react中的函数组件通常只考虑负责UI的渲染，没有自身的状态没有业务逻辑代码，是一个纯函数。它的输出只由参数props决定,不受其他任何因素影响。为了解决给函数组件加状态，可以使用Hooks技术实现。
1）useState 使用

import React, { Component, useState } from "react";
import { View,StyleSheet, TextInput,Text } from "react-native";

const UselessTextInput = () =>  {
//使用Hooks技术添加value状态，并设置默认值
  const [value,setValue] = useState('rfradsfdsf')

  return (
    <View style={styles.container}>
      <TextInput
        style={{ height: 40}}
        placeholder='请输入用户名'
        onChangeText={(text)=>{
          setValue(text)
        }}
        value={value}
      />
      <Text>{value}</Text>
   </View>
  );
}
const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    backgroundColor: '#ffffff',
    borderBottomColor: '#000000',
    borderBottomWidth: 1,
  },
});
export default UselessTextInput;

参考：

React Native入门 - 函数组件，class组件，props ，state - 简书

React Native 参数传递 - 简书

https://www.cnblogs.com/iuniko/p/16532021.html

react-navigation:onWillFocus/onDidFocus/onWillBlur/onDidBlur/componentWillUnmount等周期_Mars-xq的博客-CSDN博客

React Native 生命周期函数详解 - 简书

react native基础知识(三) - 哔哩哔哩文章来源地址https://www.toymoban.com/news/detail-578529.html

到了这里，关于React Natvie 参数函数对象类的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！