携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

React组件

1.区分组件

• 傻⽠组件(展示组件)
  负责根据props显示⻚⾯信息

• 聪明组件(容器组件)
  负责数据的获取、处理

• 区分展示组件和容器组件
  1). 分离⼯作组件和展示组件
  2). 提⾼组件的重⽤性
  3). 提⾼组件可⽤性和代码阅读
  4). 便于测试于后续的维护

2.函数式组件
1)特点
(1)函数式组件是⼀种⽆状态组件，只是为了创建纯展示组件，这种组件只负责根据传⼊的props来展示，不涉及到要state状态的操作。  
(2)组件不会被实例化，整体渲染性能得到提升。 
(3)组件不能访问this对象。 
(4)组件⽆法访问⽣命周期的⽅法。 
(5)⽆状态组件只能访问输⼊的props，同样的props会得到同样的渲染结果，不会有副作⽤。 
(6)官⽅⽂档说：在⼤部分React代码中，⼤多数组件被写成⽆状态的组件，通过简单组合可以构建成其他的组件等，这种通过多个简单然后合并成⼀个⼤应⽤的设计模式被提倡。

2)写法

• 暴露出去的写法

import React from 'react'\
export default function xxx() {
   return (
         <div>
            我是函数式组件
         </div>
              )
}

• ⻚⾯内部使⽤

function xxx() {
   return (
       <div>
         我是函数式组件
       </div>
 )\
}

3.class组件 React.Component是以ES6的形式来创建react的组件的，是React⽬前极为推荐的创建有状态组件的⽅式

import React, { Component } from 'react'
export default class ConditionLoop extends Component {
   render() {
         return (
                 <div>
                     类组件
                 </div>
 )
 }
}

⾼阶组件(HOC)

1.特点
⾼阶组件是为了提⾼组件的复⽤率，抽离出具有相同逻辑或相同展示的组件本身是⼀个函数，接收⼀个组件再返回⼀个新的组件，返回的这个新的组件可以对属性进⾏包装，也可以重写部分⽣命周期。
2.写法
通常高阶组件前面用use命名

//创建withLearnReact⾼阶组件，传递⼀个Component组件进去，返回⼀个新的组件NewComponent
const withLearnReact= (Component) => {
 const NewComponent= (props) =>{
 return <Component {...props} name="React"/>
 }
 return NewComponent
}

React组件化和ui库引入使用

1.引⼊使⽤ant-design组件库

//安装命令
npm install antd--save

2.按需配置

• 更改我们的启动插件

//安装 customize-cra(由于新的 react-app-rewired@2.x 版本)
npm add react-app-rewired customize-cra


//更改package.json⽂件
/* package.json -代表没改前的代码，+代表已经更改的代码*/
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}

• 执⾏安装 babel-plugin-import插件（按需加载的插件）

npm add babel-plugin-import

• 创建⼀个 config-overrides.js

const { override, fixBabelImports } =require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
    }),
);

• 引⼊Button组件使用

import { Button } from 'antd';