REACT的学习心得三：组件详解

目录

 

一：组件三大属性之一：props属性

1：每个组件对象都有props属性（默认为空）

2：组件内部标签的所有属性都存在props中（某次实例中传入的属性都默认在props中）

3：内部读取某个值的：this.props.propsname

4：通过标签属性从组件外传递至组件内（只读）

5：设置组件的默认props值：

6：设置props属性的必要性和数据类型（需要先引入库（））

7：组件嵌套

 二：组件三大属性之refs

1）refs属性

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

2：组件中可以通过this.refs.refName来得到真实的DOM对象

3：作用：用于操作指定的ref属性dom元素对象（表单标签居多）

2）：事件处理：

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

       1：React是通过自定义（合成）事件，而不是使用的DOM事件

       2：注：在自定义方法内我们指定的this指向null，内置方法对象指向实例对象

3：event.target:获取元素本身对象 

三：组件三大属性之state

1：组件被称为状态机，通过更新组件的状态值来更新对应页面的显示（重新渲染）

2：初始化状态

3：读取某个状态值：this.state.statepropeName

4:更新状态------->组件界面更新

四：受控组件；

1：Recat是一个单向数据流，但可以自定义双向数据流组件

2：案例：

五：组件的生命周期；

1：生命周期图；

1：初始化渲染-》构造方法-》 组件将要被挂载时执行的方法-》渲染render-》组件挂载完毕时执行的方法

2：上述方法除了reder（）都会执行一次

3：组件渲染前执行方法，方便用户发送ajax请求，开启定时器。

4：加上组件被修改的方法执行顺序；

5：加上文件被销毁方法的执行顺序；

六：虚拟DOMDiff算法：最小页面重绘。 

---

一：组件三大属性之一：props属性

1：每个组件对象都有props属性（默认为空）

2：组件内部标签的所有属性都存在props中（某次实例中传入的属性都默认在props中）

3：内部读取某个值的：this.props.propsname

4：通过标签属性从组件外传递至组件内（只读）

工厂函数用声明形参：

5：设置组件的默认props值：

6：设置props属性的必要性和数据类型（需要先引入库（））

7：组件嵌套

组件嵌套：就是利用组件属性不断地传递参数

 二：组件三大属性之refs

1）refs属性

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

2：组件中可以通过this.refs.refName来得到真实的DOM对象

3：作用：用于操作指定的ref属性dom元素对象（表单标签居多）

        <input ref = 'username'></input>

         this.refs.username:返回input对象

2）：事件处理：

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

       1：React是通过自定义（合成）事件，而不是使用的DOM事件

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

       2：注：在自定义方法内我们指定的this指向null，内置方法对象指向实例对象

               在render中标签必须有结束标签

解决办法：强制绑定；

1：构造函数绑定

3：event.target:获取元素本身对象 

 

三：组件三大属性之state

1：组件被称为状态机，通过更新组件的状态值来更新对应页面的显示（重新渲染）

2：初始化状态

constructor(props){

super(props);

this.state={

stateProp1:value1

};

}

3：读取某个状态值：this.state.statepropeName

4:更新状态------->组件界面更新

this.setState({

stateProp1:value1

});

案例：

四：受控组件；

1：Recat是一个单向数据流，但可以自定义双向数据流组件

2：案例：

 

五：组件的生命周期；

1：生命周期图；

1：初始化渲染-》构造方法-》 组件将要被挂载时执行的方法-》渲染render-》组件挂载完毕时执行的方法

2：上述方法除了reder（）都会执行一次

3：组件渲染前执行方法，方便用户发送ajax请求，开启定时器。

4：加上组件被修改的方法执行顺序；

5：加上文件被销毁方法的执行顺序；

 

六：虚拟DOMDiff算法：最小页面重绘。 

哪里改变了，哪里更改他。没有更改的就不弄。