React---React组件基础

1.React组件介绍

组件是 React的一等公民，使用React就是在用组件

组件表示页面中的部分功能
组合多个组件实现完整的页面

功能特点:可复用、独立、可组合

2.React组件的两种创建方式

1.使用函数创建组件

函数组件:使用JS的函数(或箭头函数)创建的组件

约定1∶函数名称必须以大写字母开头
约定2∶函数组件必须有返回值，表示该组件的结构

如果返回值为null，表示不渲染任何内容

 渲染函数组件:用函数名作为组件标签名

组件标签可以是单标签也可以是双标签

2.使用类创建组件 

类组件∶使用ES6的class创建的组件

约定1:类名称也必须以大写字母开头
约定2∶类组件应该继承React.Component 父类，从而可以使用父类中提供的方法或属性

约定3∶类组件必须提供render()方法
约定4 :render()方法必须有返回值，表示该组件的结构

 3.抽离为独立JS文件

思考:项目中的组件多了之后，该如何组织这些组件呢?

选择一:将所有组件放在同一个JS文件中
选择二:将每个组件放到单独的JS文件中
组件作为一个独立的个体，一般都会放到一个单独的JS文件中

1．创建Hello.js
2．在Hello.,js 中导入React

3．创建组件（函数或类)

4．在Hello.js 中导出该组件

5．在index.js中导入Hello组件

6．渲染组件

 4.React事件处理

1.事件绑定

React事件绑定语法与DOM事件语法相似
语法:on+事件名称={事件处理程序}，比如: onClick={() =>{}}

注意:React事件采用驼峰命名法，比如:onMouseEnter、onFocus

在函数组件中绑定事件:

2.事件对象 

可以通过事件处理程序的参数获取到事件对象

React中的事件对象叫做︰合成事件(对象)
合成事件:兼容所有浏览器，无需担心跨浏览器兼容性问题

 5.有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件

状态( state )即数据
函数组件没有自己的状态，只负责数据展示(静)
类组件有自己的状态，负责更新Ul，让页面“动”起来
比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。

6.组件中的state和setState 

1.state的基本使用

状态( state )即数据，是组件内部的私有数据，只能在组件内部使用

state的值是对象，表示一个组件中可以有多个数据

获取状态：this.state 

 总结：

状态即数据
状态是私有的，只能在组件内部使用

通过this.state来获取状态

 2.setState()修改状态

状态是可变的
语法:this.setState(要修改的数据})
注意∶不要直接修改state 中的值，这是错误的!!!

setState()作用∶

1.修改state 2.更新UI

思想:数据驱动视图
 

 3.从JSX中抽离事件处理程序

JSX中掺杂过多JS逻辑代码，会显得非常混乱
推荐︰将逻辑抽离到单独的方法中，保证JSX结构清晰

 原因:事件处理程序中this的值为undefined
希望:this指向组件实例( render方法中的this即为组件实例)

7.事件绑定this指向

1.箭头函数

利用箭头函数自身不绑定this的特点

render()方法中的this为组件实例，可以获取到setState()

 2.Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

3.class实例方法（推荐） 

利用箭头函数形式的class实例方法
注意:该语法是实验性语法，但是，由于babel的存在可以直接使用

8.表单处理 

1.受控组件

HTML中的表单元素是可输入的，也就是有自己的可变状态
而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改

React将 state 与表单元素值value绑定到一起，由state的值来控制表单元素的值

受控组件:其值受到React 控制的表单元素

步骤 

1．在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源)
2．给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)

 示例总结:
1．文本框、富文本框、下拉框操作value属性

2．复选框操作checked属性

多表单元素优化步骤：
1.给表单元素添加name属性，名称与state相同

2．根据表单元素类型获取对应值
3．在change事件处理程序中通过[name]来修改对应的state

2.非受控组件 

说明:借助于ref，使用原生 DOM方式来获取表单元素值

ref 的作用∶获取DOM或组件
使用步骤：

1.调用React.createRef()方法创建一个ref 对象

 

2.将创建好的ref 对象添加到文本框中

 3.通过ref 对象获取到文本框的值

9.总结 

1．组件的两种创建方式:函数组件和类组件
2．无状态(函数)组件，负责静态结构展示
3．有状态(类）组件，负责更新UI，让页面动起来
4.绑定事件注意this指向问题
5．推荐使用受控组件来处理表单
6．完全利用JS语言的能力创建组件，这是 React的思想