React组件概念及使用

1.概念：React里允许我们将UI视图(界面)拆分成可复用的代码片段，并对每个片段单独构思，我们将每个独立的UI片段称为"组件"

2.优点：由于组件逻辑使用JavaScript编写而非模板，因此开发者可以轻松的在应用项目中传递数据，并保持状态与DOM分离。同时达到封装的目的，支持复用

3.分类：React里，组件根据其功能可以分为两大类：

a.函数式组件：本质上就是一个函数，将组件对应的UI视图以JSX的语法当做函数的返回值return出来，代码简单晴晰，但是相比于class组件，因为本只有一个函数，所以内部无法使用组件的生命周期，但是可以利用react提供的新特性react-hook解决生命周期问题；

b.class类组件：本质上是一个类(ES6中的class类)，每一个组件都是类实例化出的一个对象，因为语法是面向对象编程，所以，可以在内容中使用react的生命周期，但是语法复杂，逻辑看起来比较复杂；

函数式组件方式一：

注意：props对象中的属性是只读性质的，及props中的属性不允许直接修改(组件内部)，只能对外提供数据，组件无论是函数式组件还是class类组件，都不能修改自身的props

 

 

 

总结：

函数式组件的运行过程(渲染过程)：

1.React支持直接将函数名当做组件名使用；

2.不管访问(使用)组件的方式是函数调用的语法还是组件名单双标签语法，当React执行到对应的位置时都会在全局查找是否有对应名字的函数，然后调用该函数；

3.如果以函数调用的语法调用组件，想向组件内部传值，直接传实参(对象)进去即可；

4.如果以组件名单双标签调用语法，想向组件内部传值，需要将想要传递的值以自定义属性的形式写到组件标签上，React会自动将其转化为键值对赋值给第一个参数props对象接收；

使用class类组件(基于面向对象)

class 组件名 extends React.Component{

render(){

return ()；

}

}

总结：

class类组件的运行过程(渲染过程)：

1.当React执行到<组件名></组件名>时，会去查看有没有同名的class类名或者函数(函数式组件)；

2.当找到该组件名的class之后，会通过这个类，实例化(new)一个对象；

3.当对象实例化完毕之后，实例对象会自动调用render方法，返回一个jsx结构渲染到页面上；

4.如果此时向class类组件内部传值，依然使用自定义属性的语法，此时，所有设置的自定义属性也会被转化成键值对赋值给当前class类实例化的这个对象的props属性，该属性也是一个对象；