React组件基础

目录

什么是组件？

创建组件的两种方式

2.类组件

提取组件

组件的状态

实例属性方法

事件绑定this指向的问题，有以下几种方法

 表单的受控和非受控

---

什么是组件？

组件就是页面中的一部分，使用 React 就是在用组件，而所谓的组件化开发就是采用分而治之的思想来管理繁杂的页面逻辑。

特点：独立，可复用，可组合

创建组件的两种方式

1.函数式组件

通过函数创建出来的组件，又称简单组件或无状态组件

本质上来说就是一个js函数

使用的步骤有两步：

1.先定义 

a，函数名称必须以大写字母开头。

b，必须有返回值，返回值表示该组件的结构，如果不想渲染任何内容，可以

 2.再使用

a，<函数名/>，单标签闭合。

b，<函数名></函数名>，双标签。

***注意点：函数式 组件里面this指向的是undefined，因为Babel 编译后的代码开启了严格模式

import ReactDOM from 'react-dom'

function Hello() {
    return <div>这是第一个函数组件</div>
}
// const Hello = () => <h1>这是一个函数组件！</h1>;

// 把函数的名字作为标签名进行渲染，可以使用单闭合，或双标签的形式
ReactDOM.render(<Hello />, document.getElementById('root'))

react解析 <Hello />标签发现是大写开头的话会被当成组来进行解析，解析的时候又发现其是一个函数式组件，随后会调用此函数，将返回的虚拟 DOM 转为真实 DOM，并渲染到页面中。

2.类组件

它也有两个步骤

1.先定义

a，使用 ES6 语法的 class 创建的组件，又称复杂组件或有状态组件。

b，类名称也必须要大写字母开头。

c，类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或者属性。

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