深入理解React三大核心属性.docx

第

深入理解React三大核心属性

目录1、State属性2、Props属性3、Refs属性（1）字符串形式（2）函数回调形式（3）createRef创建ref容器

1、State属性

React把组件看成是一个状态机（StateMachines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。

React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。

importReactfromreact;

importReactDomfromreact-dom;

classStudentextendsReact.Component{

??constructor(){

????super();

????this.state={

??????name:花少北

????}

??}

??render(){

????=老番茄;

????returnh4{}/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.内部读取某个属性值：pertyName

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

5.对props中的属性值进行类型限制和必要性限制

类组件：

importReactfromreact;

importReactDomfromreact-dom;

//函数组件

function?Student(props){

??returnp{}{props.address}/p

const?Stu={

??name:某幻,

????address:青岛

ReactDOM.render(Student{...Stu}/Student,document.getElementById(root))

函数组件：

importReactfromreact;

importReactDomfromreact-dom;

classStudentextendsReact.Component{

??render(){

???return(

?????p{}{ps.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的三种形