深入理解React 三大核心属性
1、State 属性
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
import React from 'react ';
import ReactDom from 'react-dom';
class Student extends React.Component{
constructor() {
super();
this.state={
name:'花少北'
}
}
render() {
this.state.name='老番茄';
return <h4>{this.state.name}</h4>
}
}
ReactDOM.render(<Student/>,document.getElementById('root'))在React中，一个组件中要读取当前状态需要访问 this.state, 而 state 是可以被修改的，但是，要更新数据直接给 this.state 赋值是不可行的，必须要使用 setState（）
this.setState() {
name:'某幻'
}（1）setState 不会立刻改变React组件中state的值.
（2）setState 通过触发一次组件的更新来引发重绘.
（3）多次 setState 函数调用产生的效果会合并。
2、Props 属性
react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。
props属性的特点
1.每个组件对象都会有props（properties的简写）属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值：this.props.propertyName
4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）
5.对props中的属性值进行类型限制和必要性限制
类组件：
import React from 'react ';
import ReactDom from 'react-dom';
// 函数组件
function Student(props){
return <p>{props.name} {props.address}</p>
}
const Stu={
name:'某幻',
address:'青岛'
}
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))函数组件：
import React from 'react ';
import ReactDom from 'react-dom';
class Student extends React.Component{
render() {
return(
<p>{this.props.name} {this.props.address}</p>
)
}
}
const Stu={
name:'某幻',
address:'青岛'
}
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))props 属性 和 state 属性的区别
- props中的数据都是外界传递过来的；
- state中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
- props中的数据都是只读的，不能重新赋值；
- state中的数据，都是可读可写的；
- 子组件只能通过props传递数据；
3、Refs 属性
定义：组件内的标签可以定义ref属性类标识自己，有点类似与JS中的id
React文档中再三强调，请不要过度使用refs，所以当我们可以用dom原生对象解决时，尽量不要使用refs 依照之前的写法，首先是给出类组件和函数组件中refs的写法
ref 的三种形式
（1）字符串形式
【官方不推荐】
class App extends React.Component{
changeInput = ()=>{
const {input} = this.refs
}
render() {
return (
<div>
<input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
</div>
)
}
}（2）函数回调形式
class App extends React.Component{
changeInput = ()=>{
console.log(this.inputRef);
}
render() {
return (
<div>
<input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
</div>
)
}
}（3）createRef 创建 ref 容器
【目前官方最推荐的一种】
class App extends React.Component{
inputRef = React.createRef()
changeInput = ()=>{
console.log(this.inputRef.current);
}
render() {
return (
<div>
<input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
</div>
)
}
}函数组件的写法
function App(){
const inputRef = useRef("")
return (
<div>
<input type="text" placeholder={"please input your value"} ref={inputRef}/>
</div>
)
}到此这篇关于深入理解React 三大核心属性 的文章就介绍到这了,更多相关React 核心属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性2022-08-08
在现代单页应用（SPA）中,路由管理是至关重要的一部分,它不仅决定了用户如何在页面间切换,还直接影响到整个应用的性能和用户体验,这些看似不起眼的问题,往往会导致功能错乱和性能下降,本篇文章将深入探讨在 React 中如何高效监听路由变化,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了react实现Radio组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了react项目引入scss的方法,本文给大家介绍了React pwa的配置方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了如何强制刷新react hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧2023-09-09
react-router v4如何使用history控制路由跳转详解
这篇文章主要给大家介绍了关于react-router v4如何使用history控制路由跳转的相关资料，文中通过示例代码介绍的的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以，我们只需要在原生工程中集成支付宝和微信支付的sdk，然后使用NativeModules调用即可，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家介绍了React团队测试并发特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论