React-组件篇

哈喽，又见面啦！

之前将react的基础的东西给写了一下，今天继续我的学习笔记咯～～

再讲解之前呢，我想先问一下大家是怎么理解模块与组件，模块化与组件化的？

我来说哈，模块呢是函数，而组件呢是一个界面的局部功能模块，顾名思义，组件里面包含html ,css ,js 三大行为，还有可能包含图片

组件化就是通过各组件组合完成的项目，即组件化项目，现在基本上都是这样的，这样减少了很多不必要的工作，少敲打了好多代码呢

js是面向对象的编程，而react是面向组件的编程

一个页面的创建经历了面向对象到面向模块再到面向组件的过程

那么react的组件化编程如何操作呢

第一步呢首先要定义组件

顾名思义，就是给组件起个标签名称，当然这里也有不同的方式

1）工厂函数组件（称简单组件）

function SingleComponent(){

return <h2>简单组件</h2>

函数必定会又返回值的，那么这里就返回了一个想要展示的值

}

2）ES6类组件（称复杂组件）

既然提到类，肯定是创建个类咯

class ClassComponent extends React.component{

render(){

return <h2>复杂组件</h2>

}

}

在这里面创建一个类，然后通过extends 继承的方式，渲染到component中去，render方式创建实例

有木有发现组件的名称第一个首字母是大写的，这个是必须要大写的，是为了和html标签区分，并且组件标签是任意的，而html标签就是固定的那些

这样组件就定义完成，下面就需要进行第二步了

第二步就是渲染组件标签

ReactDom.render(<SingleComponent/>,document.getElementById('test1'))

ReactDom.render(<ClassComponent/>,document.getElementById('test2'))

注意哦，标签必须有/结尾

当当当，这样简单的组件的实现啦～话不多，赶紧去试试吧