class写法
import React from "react";
import { View ,Text} from "react-native";
class ClassView extends React.Component{
    constructor(props){
       super(props);
       this.state={
            num:2
       }
    }
    //加载成功回调函数
    componentDidMount(){
        const {num}=this.state
        this.setState({
            num:num+1
        })
    }
    //卸载的时候执行
    compentWillUnmount(){

    }
    render(){
        const {num} =this.state
        return(
            <View style={{width:200,height:200,backgroundColor:'red'}}>
                <Text>{num}</Text>
            </View>
        )
    }
} 
export default ClassView;

函数式写法
import React, { useState, useEffect, useRef } from "react";
import { View, Text, ScrollView, useWindowDimensions, useColorScheme, StyleSheet } from "react-native";

//函数式写法
function FunctionView(props) {
    const { num } = props
    //默认值值被赋值也呗监听
    const [value, setValue] = useState('默认值')

    //获取节点
    const viewRef = useRef(null)
    //获取设备宽高
    const { width, height } = useWindowDimensions()
    console.log(useColorScheme())
    //监听器,监听为空 相当于组件mount生命周期
    useEffect((e) => {
        console.log(width, height)
        viewRef.current.scrollToEnd({ animated: true })
        //获取系统颜色模式

    }, [])
    const numView = () => {
        return (
            <Text style={style.Bold}>{num}</Text>
        )
    }
    return (
        <View style={[style.root,style.Bold]}>
            {numView()}
            <ScrollView ref={viewRef}>
                {props.children}
                {/* 默认插槽 */}
            </ScrollView>
        </View>
    )
}
const style=StyleSheet.create({
    root:{ width: 200, height: 200, backgroundColor: 'red' },
    Bold:{
        fontWeight:'bold'
    }
})
export default FunctionView

Context react全局数据

import {createContext,useContext} from 'react'
//注册
export const ThemeContext = createContext<string>('默认值')
<ThemeContext.Provider value={绑定值}>
根节点标签
</ThemeContext.Provider>
//使用
const theme = useContext(ThemeContext)

HOC

import React from 'react';
import { Text } from 'react-native';

type IReactComponent =
React.ClassicComponentClass
|React.ComponentClass
|React.FunctionComponent
|React.ForwardRefExoticComponent<any>

export default <T extends IReactComponent>(OrginView :T): T => {
    const HOCView = (props: any)=>{
        return (
            <>
                <OrginView {...props}/>
                <Text>s</Text>
            </>
        )
    }
    return HOCView as T;
}

memo 渲染判断

//函数式
export default React.memo((props)=>{
},(preProps,nextProps)=>{
    return true //使用缓存 false//更新
})

//class
export default class Views extends React.Componen<Props, any>{
    shouldComponentUpdate(nextProps){
        return true
    }
}

useMemo缓存计算

const newData=useMemo(()=>{
    return xxx
},[data])
//data 为依赖数据 依赖数据发生变化才会执行方法
//返回计算值
也可以return元素 缓存元素

useCallback缓存函数对象

const newData=useCallback(()=>{
    return xxx
},[data])
//data 为依赖数据 依赖数据发生变化才会执行方法
//返回值

useRef获取实例

const viewRef=useRef(null)
<View ref={viewRef}></View>

forwardRef ref转发

//将子组件某个元素的实例转发出去
export default forwardRef((props,ref)=>{
    <View ref={ref}></View>
})

useImperativeHandle 暴露子组件函数

useImperativeHandle(ref,()=>{
    return {
      xxx,xxx
    }
})