傻瓜组件（展示组件）

负责根据props显示页面信息

聪明组件（容器组件）

负责数据的获取，处理

函数式组件

import React from 'react';

export default function xxx() {
  return (<div>函数式组件</div>);
}

class组件

// es6的形式：React.Component
import React, { Component } from 'react';

export default class xxx extends Component {
  render() {
    return (
      <div>class组件</div>
    );
  }
}

组件化和ui库引入使用

ant-design

• 安装

  npm install antd --save
  

• 例：

import React, { Component } from 'react';
import { Button } from 'antd'
import "antd/dist/antd.css"

export default class AntdDemo extends Component {
  render() {
    return (
      <div>
        <Button type='primary'>点我</Button>
      </div>
    );
  }
}

性能优化之PureComponent

• PureComponent是内部定制了shouldComponentUpdate⽣命周期，重写了⼀个⽅法来替换shouldComponentUpdate⽣命周期⽅法
• 平常开发尽量使⽤PureComponent设计组件
• 小个人原则
  • 确保数据类型是值类型
  • 如果是引⽤类型，确保地址不变，同时不应当有深层次数据变化
• 使⽤PureComponent可以省去shouldComponentUpdate的代码，会简单很多
• 例：

  class Title extends PureComponent {
    //   shouldComponentUpdate(nextProps) {
    //     return nextProps.title !== this.props.title;
    //   }
    render() {
      return <h1>{this.props.title}</h1>;
    }
  }
  

性能优化之React.memo

• 是⼀个⾼阶组件的写法
• 让函数组件也拥有了PureComponent的功能
• 例：

  const MemoComponent = React.memo((props) => {
    return <h1>{props.title}</h1>;
  });
  

高级使用之组件复合写法

类似vue的组件插槽

import React from 'react';

function Dialog(props) {
  return (
    <div style={{ border: `1px solid ${props.borderColor || '#f00'}` }}>
      {/* 等同于vue中匿名插槽 */}
      {props.children}
      {/* 等同于vue中具名插槽 */}
      {props.footer}
    </div>
  );
}

export default function Composition() {
  const confirmBtn = <button onClick={() => alert('成功')}>确定</button>;

  return (
    <div>
      <Dialog borderColor='#0f0' footer={confirmBtn}>
        <h1>提示</h1>
        <p>确定***吗？</p>
      </Dialog>
    </div>
  );
}