React三大属性

State

1）state是组件对象中最重要的属性，值是一个对象(可以包含多个数组，有点像vue中的data属性)

2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示

 

React 的核心思想是组件化，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。

状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是state是私有的，可以认为state是组件的“私有属性（或者是局部属性）”。

如何判断是否为State ？

 1. 这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。
 2. 这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
 3. 这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。
 4. 这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。

Props

当一个组件被注入一些属性（Props ）值时，属性值来源于它的父级元素，所以人们常说，属性在 React 中是单向流动的：从父级到子元素。

1、理解：

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

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

2、作用：

    1）通过标签属性从组件外向组件内传递变化的数据

    2）组件内部不需要修改props数据

ref与事件处理

1、理解：

              1）组件内的标签都可以定义ref属性来标识自己

               2）在组件中可以通过this.msgInput来得到真实的DOM元素

               3）作用：通过ref获取到组件特定的标签对象，进行读取相关数据

 2、事件处理

          1）通过onXxx属性指定组件的事件处理函数

          2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

          3）通过event.target可以得到发生事件的DOM元素

 

 

总结                                                                               

 

• React中props和state都是存储数据的区别如下

1）state: 组件自身内部可变化的数据

2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改

 

• 注意点：

1）组件内置的方法中的this为组件对象，z

2) 在组件类中自定义的处理函数方法的this默认为null 所以需要强制绑定

转载于:https://www.cnblogs.com/wang2000/p/11470806.html