关于props和state的总结（持续更新）

Basic knowledge

---

STEP1
首先，要明确props和state的区别，props主要是针对于从父component传参进入当前component，更多的是针对参数传递功能的，而state是针对当前component中参数的使用。在class外声明时如下：

 interface XXXX {     //state声明
    autoFocus: boolean;
    canEscapeKeyClose: boolean;
}

type Props = {               //props声明
    apuHealth?: ApuHealth
};

STEP2
extend default 新的class时，需要在< >中引入Props 和 XXXX（state生命的名称）后方可在class里使用。
STEP3
在class内要初始化，需要注意的是props因为是从外界取值，所以针对一些components的属性是必须有值的情况，不用在props内对其赋值。而state就需要对其值进行赋初值如下：

 constructor(props: Props) {
        super(props); 
        this.state = {
            autoFocus: true,
            canEscapeKeyClose: true,
        };
        }

STEP4

在调用两个的具体值的时候如下所示：

this.state.autoFocus
this.props.apuHealth!.xxxxx

而要改变state的值的方法是调用内部函数this.setState()如下：

private handleOpen = () => this.setState({ autoFocus: false });

写一个component，如何可以复用

---

复用，可以说是对component中的更多的值进行定制化设定，所以就要将component中相应一些子类component的属性定义在props中，不要使用state在对象内部调用。

type Props = {
    isOpen: boolean,
    onClose: ()=>void,
};

export default class AAA extends React.Component<Props>

                       **..省略中间code...**

<Dialog isOpen = {this.props.isOpen} onClose = {this.props.onClose}>

在这个component中做好props参数设定后。在使用该component的位置对以上两个属性进行赋值，如下所示：

export interface BBB {
    opensite : boolean;
}

                       **..省略中间code...**

export default class CCC extends React.Component<Props,BBB>

                       **..省略中间code...**

this.state = {
            opensite : false,
        };

                       **..省略中间code...**

<AAA isOpen={this.state.opensite} onClose={this.handleClose}/>

                       **..省略中间code...**

private handleClose = () => this.setState({ opensite: false });

这样就实现了在目标位置对component的实例应用，同时遵从此思想，对更多的属性进行props设定。就可以对一个component进行多次不同呈现样式的复用。是模块化编程的一个具体体现。

持续更新中……