状态机

ReactNative 将UI视作一个状态机,每个UI场景就是状态机的一个状态

不要在状态机变量中存放于显示无关的变量,会导致务必要渲染UI

State

尽可能让自定义的组件成为无状态组件
好的reactnative设计思路:创建多个只负责渲染数据的无状态组件，将他们封装在一个有状态的reactnative组件中,有状态的组件封装了UI交互的逻辑，而无状态的组件负责渲染UI界面。

constructor(props) {
        super(props)
        this.state = {
            input: '',
            inputPWD: '',
        }
    }
    updateNum(newText) {
        this.setState((state) => {
            return {input: newText}
        });
    }

    updatePWD(newText) {
        this.setState(() => {
            return {
                inputPWD : newText
            }
        })
    }

通过this.state.状态机变量名访问状态机变量

我们需要将状态机变量看做 不可变常量，不能直接改变状态机变量，只能通过setState函数

渲染

setState函数原型：setState(oldState, callback) 第二个参数为回调函数,会在setState完成并且重新渲染完成(如果需要的话)后被调用

如果setState函数将传入函数的返回值与当前状态机相比没有任何修改或增加,将不会进行渲染

改变状态机变量后所有与状态机变量值有关系的组件都会被刷新。

当修改组件的状态机变量值后，ReactNative会在考虑清楚如何高效的渲染UI后,执行SetState的箭头函数来渲染组件,因此setState是异步执行的函数

当子组件需要渲染时,那么该子组件的各个生命周期的函数都会按声明周期调用这就是渲染高效的原因

判断是否渲染

//判断是否渲染，实现这个函数后,会在重新渲染组件前，调用这个函数，返回false就放弃渲染组件
shouldComponentUpdate() {
        if (this.state.input.length < 3) {
            return true;
        }
        return false;
    }

强制渲染

forceUpdate(callback)
当UI的可变数据来源为属性和状态之外获取时,可以使用这个函数要求重新渲染，这会导致所有级别的UI都重新读取、计算、渲染。

这个渲染过程不会调用shouldComponentUpdate
可以通过回调函数,在执行结束后调用
尽量避免使用

render渲染过程

RN通过render实现重新渲染。原型为ReactComponent render()
任何组件都必须有这个函数也必须只能返回一个可渲染组件
通过修改属性或者状态机变量来触发render的重新渲染，而不是直接调用这个函数

简洁写法

    //简洁写法1（通过指定参数名称与状态机变量名称相同 省略）
    updateNum(input) {
        this.setState(() => {
            return {input}
        })
    }
    
    //简洁写法2（省略箭头函数）
    updateNum(input) {
        this.setState( {input})
    }
 ```

## 成员变量

```javascript
    constructor(props) {
        super(props)
        this.myProperty1 = "test"
        this.myProperty2 = true
        this.state = {
            input: '',
            inputPWD: '',
        }
    }
    //就可以在组件中使用myProperty1  myProperty2 这两个成员变量

组件可以有静态变量、静态成员函数，直接用类名.调用

回调函数绑定

//在constuctor函数中
this.updateNum = this.updateNum.bind(this)

绑定操作是为了让回调函数能正确解析出this，否则this.updateNum函数被执行时,指向另外对象而不是该组建类的实例