扫码阅读
手机扫码阅读
React 三大基础(State Props Ref)
![](/theme/default/default/images/main/eye-open.png)
我们非常重视原创文章,为尊重知识产权并避免潜在的版权问题,我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容,访问作者的公众号页面获取完整文章。
![](/theme/default/default/images/main/icon-jing.png)
程序员华仔
扫码关注公众号
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
有兴趣,请关注程序员华仔。
想要了解更多内容?
![](/theme/default/default/images/main/icon-jing.png)
程序员华仔
扫码关注公众号
程序员华仔的其他文章
加入社区微信群
与行业大咖零距离交流学习
![](https://cdn.easycorp.cn/rongpm/upload/202312/f_39217d624bb2b42ce8f6322ebd7e573a.png)
![](https://cdn.easycorp.cn/rongpm/upload/202312/f_39217d624bb2b42ce8f6322ebd7e573a.png)
软件研发质量管理体系建设
白皮书上线