ReactNative中Component的组成

ReactNative 中 Component 的组成

Component 组件

• 定义（ES6 Class 的形式定义）：

  class CustomButton extends React.Component<{},{}> {
      render() { //渲染入口
          return (<View></View>)
      }
  }
  注：Component 的泛型类型为 Component<P,S>，分别为属性 Props 和状态State，暂时传入空对象{}，后面会详细解读。

• 样式（Style）（CSS）
  所有的核心组件都接受名为 style 的属性，用来确定当前控件的 UI 样式。
  它接受传入对象或者数组（数组中后面的样式优先级更高）。
  为了便于查阅和管理，建议使用 StyleSheet.create 来集中定义组件样式。

  import * as React from 'react';
  import {Text, StyleSheet, View} from "react-native";
  
  export default class CustomButton extends React.Component<{}, {}> {
      render() {
          return (
              <View>
              <Text style={styles.textObject}>Object</Text>
              <Text style={[styles.textObject, styles.textArray]}>Array</Text>
              </View>
          )
      }
  }
  
  const styles = StyleSheet.create({
      textObject: {
          width: 100,
          height: 100,
          color: 'blue'
      },
      textArray: {
          fontSize: 20,
          color: 'red'
      }
  });

• 属性（Props）（只读）
  外部组件通过传值的方式，定制内部组件的样式或处理逻辑的参数叫做属性。

  import * as React from 'react';
  import {Text, TouchableOpacity} from "react-native";
  
  interface Props {
      btnStyle: any
      btnText: string
      btnPress: () => void
  }
  
  class CustomButton extends React.Component<Props, {}> {
      render() {
         return (
             <TouchableOpacity onPress={this.props.btnPress}>
                  <Text style={this.props.btnStyle}>
                      {this.props.btnText}
                  </Text>
              </TouchableOpacity>
          )
      }
  }

• 状态更新（State）（私有）
  内部组件通过动态修改State，主动触发组件的render()方法实现UI的重新渲染。

  import * as React from 'react';
  import {Text} from "react-native";
  
  interface State {
      count: number
  }
  
  class CustomButton extends React.Component<{}, State> {
  
      private _interval: number;
  
      constructor(props: any) {
          super(props);
  
          // State需要初始化
          this.state = {
              count: 0
          };
  
          // 设置定时器，每1s数字+1
          this._interval = setInterval(() => {
              // 动态修改State
              this.setState({
                  count: this.state.count + 1
              })
          }, 1000);
      }
  
      /** 组件销毁时清理计时器 */
      componentWillUnmount() {
          clearInterval(this._interval);
      }
  
      render() {
          return (    
              <Text style={{width: 100, height: 100}}>
                  {this.state.count}
              </Text>
          )
      }
  }