React的三大核心属性是什么

今天小编给大家分享一下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 <h5>{this.state.name}</h5>    }}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属性的特点

每个组件对象都会有props（properties的简写）属性

组件标签的所有属性都保存在props中

内部读取某个属性值：this.props.propertyName

作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

对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的三大核心属性是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。