React组件

React组件创建：特点：复用 独立 可组合

函数创建：使用JS函数或箭头函数创建的组件

1
2
3
4
5
6
7
8
9
10
11

import React from 'react';
const Dnz = () => {
    
     return (
       <div>
             <h2>函数组件</h2>
              <p onClick={fn}>点击</p>
       </div>
     )
}
ReactDOM.render(<Dnz />, root)

【注意事项：

​ 1.类与函数名称都需以大写字母开头，使用大驼峰命名法。

​ 2.函数组件必须有返回值，表示该组件的结构，而类组件则需提供render()方法。

​ 3.函数的组件标签闭合，而类的render()方法须有返回值表示该组件的结构

】

class创建组件：使用ES6的class关键字创建的组件

类组件应继承React.Component父类，从而可以使用父类中提供的方法和属性。有关继承请访问es5类的创建与继承与es6类的创建与继承

1
2
3
4
5
6
7

import React from 'react';
class Hello extends React Component {
    render() {
        return <div>Hello Class Component!</div>
    }
}
ReactDOM.render(<Hello />, root)

组件抽离：将每个组件放到单独的JS文件中。独立体放单独JS文件中

步骤:

​ 1.创建JS文件

​ 2.在JS中导入React核心包

​ 3.创建组件（函数或类）

​ 4.在JS中导出组件

​ 5.在index.js中导入组件

​ 6.渲染组件

扩展：

状态组件与无状态组件

函数组件：无状态组件

类组件class：有状态组件

区别：

• 类组件有自己的状态，负责更新 UI，让页面“动” 起来 （响应式）
• 函数组件没有自己的状态，只负责数据展示（静）