REACT全家桶（3）----组件

一、组件介绍

组件化的概念

代表页面中的某部分及功能

特点：可复用、 独立

二、两种创建方式

1.函数组件

使用JS函数创建的组件

函数名必须大写开头

组件必须有返回值

 2.类组件

类名大写开头

类组件应继承React.Component父类

类组件必须提供render()方法

render()必须有返回值

 三、将组件代码放在独立的js文件

1.创建组件js文件，eg：Book.js

2.在Book.js文件中导入React

3.实用类或者函数创建组件

4.组件必须要导出才能使用

5.在指定的文件中导入Book.js

6.渲染组件

//Book.js

//index.js

四、组件样式

1.行内样式（官方推荐） 

2.外部导入

准备好外部css文件，在js中使用import引入

注意：class属性建议写为className

五、ref获取dom

 

六、列表渲染

使用js原生的map方法

为了列表的复用与重排，设置key值，提高性能

七、条件渲染

八、富文本展示

九、事件处理

事件绑定：on+事件名称={fn}

注意：要使用驼峰命名法

React并不会真的绑定一个事件到具体的元素上，而是采用事件代理的模式