React 三大基础(State Props Ref)

React的三大基础

React，由Facebook开发的框架，主要特点是虚拟DOM机制，提高了性能。其三大基础包括state、props和ref。

1. State

React应用是单页面应用(SPA)，其中各界面是由组件构成。组件内部状态由state维护，初始化通常在构造函数或以属性方式，在更新时使用setState()。

初始化State的例子：

class Person extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {name:"Jom",age:"18"}
    }
    // ...
}

修改State时使用setState()，可带回调函数以确保数据更新后的操作。

2. Props

Props用于组件间通讯，一端发送数据，另一端接收数据。适用于父子组件间通讯。

class Person3 extends PureComponent {
    // ...
    var {name, age} = this.props
    // ...
}

兄弟或更远关系组件间通讯则可能需使用redux等状态管理库。

3. Ref

Ref用于直接访问DOM元素或组件实例，类似于HTML中的id。创建ref的方式包括String ref、callback ref和createRef API。

class MyInputText extends React.Component {
    // ...
    handleSubmit = () => {
        console.log(`姓名：${this.nameInput.value}`);
    }
    // ...
}

React不推荐过度使用ref，而是建议优先使用state。

END

有兴趣，请关注程序员华仔。